Question

I am trying to find the best option to create a simple progress bar that I need to be triggered periodically from within another JavaScript script.

Every few minutes, a timer would cause the progress bar to start going from 0 to 100%. Once it reaches 100%, the bar would reset to 0.

I am trying to implement a smooth animated version of the bar, like this one: http://www.webappers.com/progressBar/. (I tried adapting this particular one but I could not get it to work the way I described)

I am looking into the jQuery UI ProgressBar: Is it possible to use it in the manner I have described?

Thank you.

Answer 1

This is pretty quick to do with the jQuery UI progress bar, just call this initially:

$("#progressbar").progressbar({ value: 0 });

And this in your other script, probably via setInterval():

var percentComplete = 40; //Get the percent
$("#progressbar").progressbar( { value: percentComplete } );

Put it together like this:

var percentComplete = 0; //Update this in your other script
$("#progressbar").data("progress", setInterval(function() {
  if(percentComplete == 100) {
    percentComplete = 0;
    clearInterval($("#progressbar").data("progress")); //Stop updating
  }
  $("#progressbar").progressbar( { value: percentComplete } );
}, 200));

The animated effect keeps it a bit smoother looking as well: see here for a demo. This is done via a single CSS rule, in the demo case:

.ui-progressbar-value { background-image: url(images/pbar-ani.gif); }