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

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 […]
  • 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 […]
  • Gradienter: Add gradient to elements (21)
    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 […]
  • Create image gallery in 4 lines of jQuery (138)
    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 (90)
    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 od jQuery code […]

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

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

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>