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.

  • JUST – JavaScript Useful Stuff (5)
    I like experiment with data visualization on client side. For that purpose, of course, I need some data for development phase. Since that development phase means that something constantly […]
  • HTML5/CSS3 Circle Music Player (3)
    More then a year ago my very talented designer friend Jovan Stanojevic presented me idea of Circle Music player which will play local .mp3 files. This is his original idea, but after we […]
  • Coin Slider 4 WordPress (237)
    Coin Slider 4 WP will show your featured posts as image slider and rotate them using unique effects provided by jQuery's Coin Slider. Implementation is very easy, after you download […]
  • Visualize Twitter connections with Twings (3)
    I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way […]
  • Image gallery with fancy transitions effects (1034)
    I was looking all over the Internet for some jQuery gallery plugin with some interesting transition effects. I found a lot of great plugins but they all have pretty same transition […]

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

huge article.

microsoft on October 23, 2022 at 9:13 pm

How can I actually tie this to the page load? Like it loads as the page is loading.

Slem on January 19, 2016 at 8:36 am

Great that you shared this but is it possible to activate the bar by scrolling??? So that the bar expands once you scroll down the page and reach it?

OMU on August 23, 2015 at 2:43 pm

Hi! Would be possible to integrate these bars in a WordPress site?
Please contact me if you think you can do it.
Thanks!

Marcelo on July 10, 2015 at 6:08 pm

Is there a restart method?

Bribrabro on July 4, 2015 at 12:41 pm

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

//modif

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

here is how it looks…
https://cloud.githubusercontent.com/assets/12112938/7525103/97f4e2c2-f4bb-11e4-9d09-f2b3feb6a1c9.JPG

Juan Salgado on May 7, 2015 at 8:19 pm

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?

Giannis Gotsos on January 19, 2015 at 7:49 am

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

Rohan on December 17, 2014 at 7:26 am

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?

Me on October 27, 2014 at 11:37 am

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).

Regards,

Kardux on October 12, 2014 at 1:29 pm

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?

vaitheesh on September 9, 2014 at 11:19 am

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

Wordpress Plugin on August 27, 2014 at 12:43 pm

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

çelik raf on June 25, 2014 at 10:35 am

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…

Predrag Stojadinović on October 15, 2013 at 7:59 am

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?

Silviu on October 3, 2013 at 7:23 am

Simple, effective and flexible. Great job.

Jason on October 2, 2013 at 10:51 am

Leave a Reply to Giannis Gotsos Cancel reply

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