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.

progress-bar-in-4-lines

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 [ 31 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() {
    $(“.progressBar”).each(function(){
    var valor;
    var bar;

    bar = $(this);
    valor = Number(bar.attr(“data-value”));
    progressBar(valor, bar);

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

    }

  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 http://jsfiddle.net/X5Dxk/

  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: http://jsfiddle.net/wouter075/RfYsL/

    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 p2pdeals.de.
    alkajo

  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.

  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 asp.net? 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..



» 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 [...]


Leave a Reply

More Articles


more on WORKSHOP.rs