How do you animate the value for a jQuery UI progressbar?

Question

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);

Answer 1

• DEMO 1: the first one, proof of concept

$(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);
});

• DEMO 2:: adaptation of @Peter's response below for the good sake ;-).

$(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.

Answer 2

Animation with CSS3

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.

Answer 3

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')

Answer 4

a very good solution on jquery forum

http://forum.jquery.com/topic/smooth-progressbar-animation

the progressbar should be initialized with let's say 0.1 to work

$("#progressbar .ui-progressbar-value").animate(
{
  width: "67%"
}, {queue: false});

Answer 5

Wrote this plugin/method to very easily animate any progressbar, and works very well for me, so I hope it does for everyone else, too.

(function( $ ) {
    $.fn.animate_progressbar = function(value,duration,easing,complete) {
        if (value == null)value = 0;
        if (duration == null)duration = 1000;
        if (easing == null)easing = 'swing';
        if (complete == null)complete = function(){};
        var progress = this.find('.ui-progressbar-value');
        progress.stop(true).animate({
            width: value + '%'
        },duration,easing,function(){
            if(value>=99.5){
                progress.addClass('ui-corner-right');
            } else {
                progress.removeClass('ui-corner-right');
            }
            complete();
        });
    }
})( jQuery );

Just add that code to the top of your page anywhere and use it on an element as such

$('#progressbar').animate_progressbar(value [, duration] [, easing] [, complete] );

---

EDIT:

Here's a minified version of the code, makes it load a bit faster.

(function(a){a.fn.animate_progressbar=function(d,e,f,b){if(d==null){d=0}if(e==null){e=1000}if(f==null){f="swing"}if(b==null){b=function(){}}var c=this.find(".ui-progressbar-value");c.stop(true).animate({width:d+"%"},e,f,function(){if(d>=99.5){c.addClass("ui-corner-right")}else{c.removeClass("ui-corner-right")}b()})}})(jQuery);

Answer 6

Here is an elegant solution: Growing Jquery Progress Bars

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

Answer 7

Following script not just animates progressbar but also increase/decrease displayed %values step by step

            // 'width' can be any number

               $('#progressbar .ui-progressbar-value').animate(
                {
                  width: width + '%'
                },
                {
                  duration: 3000,
                  step: function (now, fx) {
                      $('.leftvalue').html(parseInt(now) + '%');
                      $('.rightvalue').html((100 - parseInt(now)) + '%');
                  }
                });

Answer 8

you can do it with simple native html5 progress.
html:

<progress id="score-progress-bar" value="10" max="100"></progress>

js:

$('#score-progress-bar').animate({value: your_value_from_0_to_100}, {duration: time_in_ms, complete: function(){console.log('done!');}});