Continuous progress bar in Javascript

Question

I am trying to find the best option for creating a simple progress bar that should be run periodically from another JavaScript script.

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

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

I am looking through jQuery UI ProgressBar: is it possible to use it as I described?

Thank.

Answer 1

jQuery UI, :

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

script, , setInterval():

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

:

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

: . . CSS :

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