Growing jQuery Progress Bars

At RightsPro, we’ve chosen to go with jQuery UI as an interface framework and while the progress bars look great out of the box we wanted to add the effect of the progress growing to its value when the user visits the page to draw attention to it.

jQuery’s documentation for the UI components, including the progress bar, is straight forward.

Once you’ve included the proper javascript files and created the progress div a simple javascript command adds the appropriate classes and creates the progress bar:


$(function() {
$("#progressbar").progressbar({
value: 37
});
});

but to add the growing animation effect we initially set the value to 0 then animate the width of the progress bar value div created by jQuery’s javascript:


$(function() {
$("#progressbar").progressbar({
value: 0
});
$("#progressbar > .ui-progressbar-value").animate({
width: "37%"
}, 500);
});

where 500 is the time the animation should take in milliseconds.

This gives the desired effect of the progress bar growing to its value when the page loads rather than immediately rendering the final result.

Not earth-shattering, but a nice little trick.

7 thoughts on “Growing jQuery Progress Bars

  1. Hi there.
    This is exactly what I wanted to achieve.
    Thanks for the code.

    How old is it, but still insanely usefull ! đŸ™‚

    1. Just one thing I forgot:

      With the 0 value, didn’t worked for me.
      I had to add at least 1.

  2. i have a problem how do i create 2 bars on my page but with different backgrounds ?

    jQuery UI Progressbar – Animated

    .ui-progressbar .ui-progressbar-value { background-image: url(folhabarra.jpg); }

    .ui-redprogressbar .ui-redprogressbar-value { background-image: url(bmoney.gif); }

    $(function() {
    $(“#progressbar”).progressbar({
    value: 1
    });
    $(“#progressbar > .ui-progressbar-value”).animate({
    width: “87%”
    }, 1800);
    });

    $(function() {
    $(“#redprogressbar”).progressbar({
    value: 8
    });
    $(“#redprogressbar > .ui-redprogressbar-value”).animate({
    width: “27%”
    }, 1800);
    });

  3. At first this wouldn’t work for me jquery 2.1.1 and jquery-ui 1.11.4 … interestingly add an initial value of 0.0001 to the progressbar and hey presto worked … EJK

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s