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.
Mostly Tech - Ray Gauss II 
Thanks for providing the example. It was really helpful
Hi there.
This is exactly what I wanted to achieve.
Thanks for the code.
How old is it, but still insanely usefull ! đŸ™‚
Just one thing I forgot:
With the 0 value, didn’t worked for me.
I had to add at least 1.
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);
});
Are you saying this isn’t working or are you indicating this is your solution?
Excellent! Thank you!
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