Response title
This is preview!
ProgressBar animation
in Developing jQuery UI
•
12 years ago
According to the jQuery UI demos and documentation, the only way to animate the progress bar is setting the background image to an animated gif, but i think that there is a more easy way to do this:
I discovered that when you download a theme from the theme roller, it will give you an image with slashes as a background, like this one (blitzer theme): 
So i thought that a shorter way to animate the progress bar might be moving the background by changing its position.
The script would be like this:
- function animateProgressBar() {
- $("#progressbar .ui-progressbar-value").css({ 'background-position': 0 })
- .animate({ 'background-position': '+=20' }, 500, 'linear',
- function () { animateProgressBar(); });
- }
- $(function () {
- $("#progressbar").progressbar({ value: 50 });
- animateProgressBar();
- });
Where "#progressbar" would be a div element.
The first function makes a loop, because it calls itself every time the animation finishes. First of all it sets the background position to the original value, then it starts the animation. Obviously we can change the animation settings: we can make the animation faster or slower, or we can change the easing.
I think that this could be a very useful, nice update.
3