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 + "% "); }
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.
This is great, just what I needed. Thanks
every problem solved …. Thanks & Cheers.
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.
I am facing the same problem of animation reverse.
How did you solve it ?
Sorry but i am using jqury-ui-like skin. I try to change every property but still my animation is wrong. Please help.
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?
No more Jqueryui for me this is excellent!!
Thank you! Very useful
Thanks for your great code example,It’s very helpful for me.
Thank you very much.
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
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.
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 😉
Henrique, for fade out on page load use:
$(window).load(function() {
$(‘#progressBar’).fadeOut(1600, function() {
// Animation complete.
});
});
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?
multiple progress bar on one page example http://jsfiddle.net/X5Dxk/
@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…
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?
And how do we remove/make the bar ocult at the end of the progress?
i.e reaching 100% bar close up/fade out
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);
});
})
}
@ken you can take a look of source code of demo pages, everything is there
@Rafael each progress bar should have unique id
Im trying to have multiple progress bars on a page, cant seem to figure that out.
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.
Thank you, This is a very useful post. I am going to try this in my next project.
Pozdrav, odlican je ovaj progress bar, zanima me da li moze da se koristi u komercijalne svrhe?
nice i have try this my site opening