Category: JavaScript

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.