I've setup a jQuery UI progressbar but can't use jQuery animate to animate it's value. Any ideas on how to make this work?
The percentDone variable holds a number from 0 to 100 showing how far along the scrollbar should be (this works fine).
I've tried several different things to no avail. Here's what I have so far:
var progressbar = $("#progressbar1").widget();
progressbar.animate({
value: percentDone
}, 5000, function() {
console.debug('done animating');
});
Note that if I update the scrollbar using the "value" method it works fine but it jumps to that value instead of smoothly animating to it:
$("#progressbar1").progressbar('value', percentDone);
$(function() {
var pGress = setInterval(function() {
var pVal = $('#progressbar').progressbar('option', 'value');
var pCnt = !isNaN(pVal) ? (pVal + 1) : 1;
if (pCnt > 100) {
clearInterval(pGress);
} else {
$('#progressbar').progressbar({value: pCnt});
}
},10);
});
$(function() {
$('#progressbar').progressbar(); // inizializa progressbar widget
$pVal = $('.ui-progressbar-value').addClass('ui-corner-right');
var pGress = setInterval(function() { //generate our endless loop
var pCnt = $pVal.width(); // get width as int
// generate a random number between our max 100 and it's half 50,
// this is optional, and make the bar move back and forth before
// we reach the end.
var rDom = Math.floor(Math.random() * (100 - 50 + 1) + 50);
var step = rDom >= 100 ? 100: rDom; // reached our max ? reset step.
doAnim(step);
},1000);
var doAnim = function(wD) {
// complete easing list http://jqueryui.com/demos/effect/easing.html
$pVal.stop(true).animate({width: wD + '%'},1000, 'easeOutBounce');
if (wD >= 100) clearInterval(pGress) /* run callbacks here */
}
});
In a real application you may not need to generate a loop, for example, while uploading a file, your flash aplication will tell you the filesize and let you know when you have reached the max value needed, so my first code is intended to demonstrate just the use of the progressbar setter and getter and of course what make the whole thing play, that is for instance, the loop; the second one is an adaptation of the same concept with sugar.
With CSS3 there is no need to utilize JavaScript to manage the value of the progress bar directly. Just add this to your style:
.ui-progressbar-value {
transition: width 0.5s;
-webkit-transition: width 0.5s;
}
You can learn more about CSS3 Transitions.
Here is how to get it to animate smoothly, rather than the somewhat jerky way suggested in the currently accepted answer of @aSeptik. It bypasses the .progressbar('value, ...) method.
// On load, make the progressbar inside always have round edges:
// (This makes it look right when 100%, and seems nicer all the time to me.)
$("#progressbar .ui-progressbar-value").addClass("ui-corner-right");
new_width = "50px"; // you will need to calculate the necessary width yourself.
$("#progressbar .ui-progressbar-value").animate({width: new_width}, 'slow')