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.


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

Want to Learn More?

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



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

Would you like lifetime access to the hugely successful PHP for Beginners course? Click here to find out how.

FREE Code Snippets

FREE hints and tips delivered direct to you once per month.