34

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

8 Answers 8

57
  • 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.

8
  • i'm glad you like it bro! ;-) Feb 19, 2011 at 1:02
  • 3
    Is there anyway to add easing properties into this?
    – dmackerman
    Feb 28, 2011 at 19:44
  • Seems like your animate function overrides some css and sets 'ui-progressbar-value' to display: none; You need to override this again for it to work. At least I had this problem in Chrome.
    – Roozbeh15
    Dec 28, 2011 at 20:36
  • This is a lot of work to do something that should be simple. Readers be aware of the other solutions below. Nov 20, 2012 at 15:57
  • @Vael Victus: before downvote pls be sure to read the full answer tnx! Nov 20, 2012 at 21:16
44

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.

2
  • 8
    +1 for answering a question that's over two years old and updating it with current technologies! Thanks!
    – Julian
    Jul 19, 2013 at 18:41
  • Amazing, simple solution. Feb 18, 2015 at 8:04
34

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')
1
  • 6
    At first I couldn't get it to work. I found that I needed to set the progress bar value to something greater than 0, ie $("#progressbar").progressbar({ value: 0.0001 }); Also, on a different note, you can use % instead of px new_width = "50%";
    – TryHarder
    Apr 28, 2012 at 15:12
10

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});
1
  • This is a solid way to get a smooth progress bar. It doesn't run on values, but for those of us on a scale of 0-100, the value is essentially the width anyway. Nov 20, 2012 at 15:56
7

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);
4
  • Just be sure to initialize your progress bar at .01. When I set it at 0, it didn't work.
    – StingeyB
    Jun 14, 2012 at 0:10
  • Really? That's strange... This is code I use all over my sites, I've never had any problems with it, that's why I posted it here Jun 14, 2012 at 12:27
  • I bet it's just part of my installation. Either way, your code worked really well, and that's was all I had to do. I figured that out because of the answer above yours.
    – StingeyB
    Jun 14, 2012 at 16:04
  • Hmm that sure is strange, but thanks for the input! If it ever stops working I now know the first thing I can try to get it to work Jun 14, 2012 at 21:30
3

Here is an elegant solution: Growing Jquery Progress Bars

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

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!');}});
1

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)) + '%');
                  }
                });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.