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.

  • Fancy Transitions Featured Gallery for WordPress (62)
    ftFeatured is Wordpress plugin for creating image gallery with fancy transition effects of featured posts. You can choose between three types of transition effects: curtain, wave and […]
  • Gradienter: Add gradient to elements (22)
    Last night I started to work on Wordpress theme for blog and I got an idea that every post should have their own background color and that maybe those colors can be in gradient. Since that […]
  • Image gallery in 4 lines of code with MooTools and Dojo (8)
    Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and […]
  • Create image gallery in 4 lines of jQuery (140)
    Few days ago friend asked me to build image gallery with thumbnails for her web page. Request was pretty simple, she wanted large image and few thumbnails bellow that. Also, large image […]
  • News Ticker in 4 lines of jQuery (92)
    There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines of jQuery code […]

48 comments on "Animated Progress Bar in 4 lines of jQuery"

This is great, just what I needed. Thanks

Zenfly Web Design on September 29, 2013 at 8:32 pm

every problem solved …. Thanks & Cheers.

Sam on September 3, 2013 at 6:03 am

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.

Sam on September 2, 2013 at 3:51 am

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

sid on September 9, 2014 at 5:33 am

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

Sam on September 1, 2013 at 10:27 am

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?

Sam on August 31, 2013 at 11:36 pm

No more Jqueryui for me this is excellent!!

jack on August 9, 2013 at 1:27 pm

Thank you! Very useful

Jesus on July 23, 2013 at 10:24 am

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

Anntina on July 11, 2013 at 3:20 am

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

alkajo on June 13, 2013 at 7:27 pm

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.

Libenstein on June 13, 2013 at 12:28 am

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 😉

Wouter075 on May 27, 2013 at 8:57 am

Henrique, for fade out on page load use:

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

Ronan on May 26, 2013 at 2:22 pm

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?

Fabrizio Rinaldi on May 23, 2013 at 1:05 pm

multiple progress bar on one page example http://jsfiddle.net/X5Dxk/

Lazarevic Ivan on May 4, 2013 at 5:38 am

@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…

Daz on May 3, 2013 at 7:47 pm

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?

Oniony on May 1, 2013 at 9:09 pm

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

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

Henrique on May 1, 2013 at 8:24 pm

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);
});
})

}

charlyarg on April 29, 2013 at 7:32 pm

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

Lazarevic Ivan on April 29, 2013 at 9:48 am

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

Rafael on April 25, 2013 at 11:27 am

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.

ken on April 14, 2013 at 2:19 am

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

Toufiq on April 2, 2013 at 1:13 am

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

Stefan on March 8, 2013 at 8:10 am

nice i have try this my site opening

asanthosh on January 11, 2013 at 6:31 am

Leave a Reply

Your email address will not be published. Required fields are marked *