Animated Progress Bar in 4 lines of jQuery

Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is shown to user. That’s why is important that progress bar code is light weight so it can be loaded really fast at the start.


jQuery UI have progress bar widget and you can find a lot of other plugins which do the same thing. But if you learn how to write your own progress bar you’ll have more ability to change and adjust to your needs. And it’s only 4 lines of jQuery code.

First we should create DOM elements. All we need are two div elements, one in other. First one will be progress bar holder and you can put it whenever you want on your page. Another one is progress bar indicator. Something like this:

<div id="progressBar"><div></div></div>

Now, we need some basic CSS for those elements. We will set width, height and colors:

#progressBar {
		width: 400px;
		height: 22px;
		border: 1px solid #111;
		background-color: #292929;

#progressBar div {
		height: 100%;
		color: #fff;
		text-align: right;
		line-height: 22px; /* same as #progressBar height if we want text middle aligned */
		width: 0;
		background-color: #0099ff;

And at the end we need one function with 4 lines of code. It’s a simple function that accept two parameters.

function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find(‘div’).animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");

First parameters is percentages that progress bar should show and other one is jQuery object of progress bar holder. If we want to set progress bar to 80% all we have to do is:

progress(80, $(‘#progressBar’));

Of course before all of this we need to include jQuery library on our page.

This simple progress bar can be easily styled with CSS. I’ve create a few skins that can be downloaded from GitHub. Feel free to create your own skins and send me pull request.

Comments [ 41 Comments ]

  1. asanthosh
    January 11, 2013

    nice i have try this my site opening

  2. Stefan
    March 8, 2013

    Pozdrav, odlican je ovaj progress bar, zanima me da li moze da se koristi u komercijalne svrhe?

  3. Toufiq
    April 2, 2013

    Thank you, This is a very useful post. I am going to try this in my next project.

  4. ken
    April 14, 2013

    Can we have the source code for both demos . I downloaded the zip file but the source codes for the demos are not in there.

  5. Rafael
    April 25, 2013

    Im trying to have multiple progress bars on a page, cant seem to figure that out.

  6. Lazarevic Ivan
    April 29, 2013

    @ken you can take a look of source code of demo pages, everything is there
    @Rafael each progress bar should have unique id

  7. charlyarg
    April 29, 2013

    excellent! finally a simple solution for a problem instead of a BIG js component.. love it thanks a lot.

    Did this for a multiple progress bars on a page.

    function setprogress() {
    var valor;
    var bar;

    bar = $(this);
    valor = Number(bar.attr(“data-value”));
    progressBar(valor, bar); function() {
    valor = valor + 10;
    if (valor == 110) {
    valor = 0;


  8. Henrique
    May 1, 2013

    And how do we remove/make the bar ocult at the end of the progress?

    i.e reaching 100% bar close up/fade out

  9. Oniony
    May 1, 2013

    How do I make multiple progress bars on one page?

    @charlyarg – I see you posted some code, but I don’t know how to use this. Can you go more in-depth?

  10. Daz
    May 3, 2013

    @charlyarg and @Lazarevic Ivan
    The css uses the id selector #, so that will not work for multiple bars. The selector can only point to one specific div. I’d like to see a full solution for multiple bars on one page…

  11. Lazarevic Ivan
    May 4, 2013

    multiple progress bar on one page example

  12. Fabrizio Rinaldi
    May 23, 2013

    I installed it and it works, but the animation is reversed! The progess bar should go from zero to whatever you input, instead it goes from full (100%) to the input value. How can I reverse it?

  13. Ronan
    May 26, 2013

    Henrique, for fade out on page load use:

    $(window).load(function() {
    $(‘#progressBar’).fadeOut(1600, function() {
    // Animation complete.

  14. Wouter075
    May 27, 2013

    Thank you for the great code example.

    I also made a variant on the multiple progress bars on one page, you can check it out here:

    The big difference is that it uses only one class, witch i found easier to manage and style ;)

  15. Libenstein
    June 13, 2013

    Hi, how can I make this work in such way that progress bar percentage increases(could be fixed percent increase) while user scrolls down the page? and of course vise-verse – position of the scroll bar will be fixed.

  16. alkajo
    June 13, 2013

    Hi, i tried adding Wouter075 code, but it doesn’t seem to fill my bars. I think there must be a problem with the javascript, or a conflict? I tried it on

  17. Anntina
    July 11, 2013

    Thanks for your great code example,It’s very helpful for me.
    Thank you very much.

  18. Jesus
    July 23, 2013

    Thank you! Very useful

  19. jack
    August 9, 2013

    No more Jqueryui for me this is excellent!!

  20. Sam
    August 31, 2013

    Thanks for this nice jQuery Progress Bar but i have 1 little issue.

    I just added width, color n text-align property to .jquery-ui-like & everything is working fine except animation.

    Animation is reversed! The progess bar should go from zero to whatever you input, instead it goes from full (100%) to the input value. How can I reverse it?

  21. Sam
    September 1, 2013

    Sorry but i am using jqury-ui-like skin. I try to change every property but still my animation is wrong. Please help.

  22. Sam
    September 2, 2013

    Hey i solved animation problem but now i am facing IE8 problem. In internet explorer 8 animated images is not working. IE* showing bar & its border but totally blank no image or text in bar. Please help.

    • sid
      September 9, 2014

      I am facing the same problem of animation reverse.
      How did you solve it ?

  23. Sam
    September 3, 2013

    every problem solved …. Thanks & Cheers.

  24. Zenfly Web Design
    September 29, 2013

    This is great, just what I needed. Thanks

  25. Jason
    October 2, 2013

    Simple, effective and flexible. Great job.

  26. Silviu
    October 3, 2013

    How can I set the percentage value of the bar from code behind in So how to call progress(80, $(‘#progressBar’)); from the c# page?

  27. Predrag Stojadinović
    October 15, 2013

    It would be nice if the label was a third element, placed over the current two divs so that the progress bar increases underneath it…

  28. çelik raf
    June 25, 2014

    nice bars.. I like orange.. thanks..

  29. Wordpress Plugin
    August 27, 2014

    The Progress bars look really great. Nice job, bro!

  30. vaitheesh
    September 9, 2014

    The progess bar should go from zero to whatever you input, instead it goes from full (100%) to the input value. How can I reverse it?

  31. Kardux
    October 12, 2014

    Well first of all: thank you so much guyfor sharing this! (as a newbie in JS I appreciate having pre-made things to plug to my work).

    For those asking how to revert the animation: simply add “width: 0;” to you div in CSS (the default value being 100%, this is why the animation seems reversed).


  32. Me
    October 27, 2014

    I tried to download source, also do bar by myself, but I have a problem. It starts showing 100% and doesn’t change. Bar moves from the begging to the end always showing 100%, maybe someone had this issue or can help me?

  33. Rohan
    December 17, 2014

    Nice job ! You are helping me a lot in my new project somoro school management. Thank you very much

  34. Giannis Gotsos
    January 19, 2015

    I want to add multiple tabs (to represent a year each time) and everytime to get the bar data for each year. How can I add tabs for this scope?

  35. Juan Salgado
    May 7, 2015

    I just made some changes so I can put different progress bar with the same id and on the progress.js add a class to change the color depend on the percent

    function progress()
    var values = [25, 50, 75, 90, 68, 45, 22];
    var i = 0;
    $('#progress:first-child').each(function() {
    progressBar(values[i], $(this));// I send the div


    function progressBar(percent, element) {
    var progress = element.find('div');
    if (percent <= 25) //add the class color depends on the percent
    else if (percent 25)
    else if (percent 50)
    else if(percent > 75)
    progress.animate({ width: percent + '%' }, 500).html(percent + "% ");

    here is how it looks…

» Trackbacks and pingbacks click to expand

  1. […] to grab some values from a database and show how close a user was to approaching a goal. I found a great jQuery script, but the thing was I couldn’t populate the value from the code […]

  2. […]   17、Animated Progress Bar in 4 Lines of jQuery   【演示地址 | 下载地址】 […]

Leave a Reply

More Articles

more on