How to create a basic animated progress bar using JavaScript

To create a basic animated progress bar, we can use HTML, CSS, and JavaScript. Here is a step-by-step guide to achieving this:

HTML

We will first create the basic HTML structure for the progress bar. Here's an example:

<div class="progress-bar">
  <div class="progress"></div>
</div>

The HTML structure defines the basic layout of the progress bar.

Lines 1–3: It consists of a container div with the class progress-bar and a child div with the class progress. The child div will represent the progress indicator within the progress bar.

CSS

We will then define the styles for the progress bar and the progress indicator.

.progress-bar {
  width: 680px;
  height: 20px;
  background-color: #f0f0f0;
}
.progress {
  height: 100%;
  background-color: #4951f5;
  width: 0;
  transition: width 0.5s ease;
}

The CSS styles define the appearance of the progress bar and the progress indicator. Here's a breakdown of the styles:

Lines 1–5: This class sets the width, height, and background color of the progress bar container.

Lines 7–12: This class sets the height, background color, width, and transition properties of the progress indicator. The initial width is set to 0, and a transition effect is added to make the width change smoothly over time.

JavaScript

In the last step, we will update the width of the progress indicator over time using JavaScript. 

function animateProgressBar(progressBar, duration) {
  let progress = 0;
  const increment = 1 / duration * 100; // Adjust the increment value for desired smoothness
  const interval = setInterval(() => {
    progress += increment;
    progressBar.style.width = `${progress}%`;
    if (progress >= 30) {
      clearInterval(interval);
    }
  }, 10); // Adjust the interval duration for desired speed
}
const progressBar = document.querySelector('.progress');
animateProgressBar(progressBar, 2000); // Example: animates to 30% in 2 seconds

Line 1: The code defines a function called animateProgressBar that takes two parameters: progressBar and duration.

Line 2: The variable progress initializes with a value of 0. This variable will keep track of the current progress of the animation.

Line 3: The variable increment is calculated by dividing 1 by the duration parameter and multiplying it by 100. This determines the amount by which the progress bar should increment with each interval.

Line 5: The interval variable is declared and assigned the return value of the setInterval function. This function takes two parameters: a callback function and an interval duration. The callback function will be executed repeatedly at the specified interval.

Line 6: Inside the callback function, the progress variable is incremented by the increment value. This updates the progress of the animation.

Line 7: The progressBar.style.width property is set to ${progress}%. This updates the width of the progress bar element, effectively animating its progress.

Lines 9–13: The code checks if the progress has reached or exceeded 30. If so, the animation is complete, and the clearInterval function is called to stop the interval from executing further.

Line 16: This line calls the animateProgressBar function with the progress bar element (progressBar) and a duration of 2000 milliseconds (2 seconds) as arguments.

Code example

Let's run the following widget to get an idea of how the progress bar work:

That's it! With these CSS styles and JavaScript code, we can create a basic animated progress bar. Feel free to customize the styles and animations to fit your specific needs.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved