How to Create a Smooth Animated Progress Bar

While working on a timer component I needed a smooth animated progress bar so came up with the following. It only has a few lines of code and can be adapted to suit your own needs quite easily.

STEP 1

First we will create a basic HTML5 template with links to our external stylesheet and jQuery:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Animated Progress Bar</title>
      <link rel="stylesheet" href="style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   </head>
   <body>

   </body>
</html>

STEP 2

The progress bar is made up of 2 divs:

  • an outer container div
  • an inner div which will be the animated bar
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Animated Progress Bar</title>
      <link rel="stylesheet" href="style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   </head>
   <body>
      <div class="outerContainer">
         <div class="innerBar"></div>
      </div>
   </body>
</html>

STEP 3

Now let's add some styling to the divs.

Hopefully the code should be fairly self-explanatory.

I have added rounded corners to the outer div and hence also added the overflow hidden rule so that the inner bar does not extend beyond the outer div.

.innerBar {
   background: red;
   height: 40px;
   width: 0%;
}

.outerContainer {
   width: 400px;
   height: 40px;
   border-radius: 5px;
   overflow: hidden;
   background: lightgray;
}

STEP 4

We can now take care of the code to animate the inner bar.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Animated Progress Bar</title>
      <link rel="stylesheet" href="style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script>
         $(function(){         
            $('.innerBar').animate({ width: "100%" }, 5000);
         });
      </script>
   </head>
   <body>
      <div class="outerContainer">
         <div class="innerBar"></div>
      </div>
   </body>
</html>

Line 9: this ensures the code only runs once the page has rendered.

Line 10: we target the class of .innerBar and animate to a width of 100% over 5 seconds (5000 milliseconds).

STEP 5

At the moment the bar will begin animating once the page has loaded. 

However, I want it to start when a button has been clicked.

First we will add the code for the button (line 15):

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Animated Progress Bar</title>
      <link rel="stylesheet" href="style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script>
         $(function(){         
            $('.innerBar').animate({ width: "100%" }, 5000);
         });
      </script>
   </head>
   <body>
      <button id="start">START</button>
      <div class="outerContainer">
         <div class="innerBar"></div>
      </div>
   </body>
</html>

STEP 6

Line 10: we target the id of the button (#start) and run a function when it has been clicked.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Animated Progress Bar</title>
      <link rel="stylesheet" href="style.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script>
         $(function(){ 
            $('#start').click(function(){
               $('.innerBar').animate({ width: "100%" }, 5000);
            });   
         });
      </script>
   </head>
   <body>
      <button id="start">START</button>
      <div class="outerContainer">
         <div class="innerBar"></div>
      </div>
   </body>
</html>

That's it!

You could add some styling to the button or even include Bootstrap on the progress bar and button.

Want to Learn More?

Become a member and get access to the member only area of this site here.

Comments

Your email address will not be published.

User Avatar

I have seen some striped designs that move on some progress bars. How do I do this?

by Freddie, 05-Jan-2016

User Avatar

I believe you are referring to those typically seen on Bootstrap sites. You can apply Bootstrap css styles to your progress bars and use those if required. It is also possible to achieve this with your own css. However, some of the animations are not compatible with older browsers.

by Patrick Morrow, 05-Jan-2016

PHP for Beginners

Enrol in the full course here

PHP, MySQL and PDO

Coming soon, a full course on using PHP, MySQL and PDO. Be notified as soon as the course goes live.