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.

Here is an example. Click on the Start button:

STEP 1

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

STEP 2

The progress bar is made up of 2 divs:

• an outer container div

• an inner div which will be the animated bar

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.

STEP 4

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

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):

STEP 6

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

That's it!

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