jquery progress bar : non determinate one

Question

I am using jQuery progress bar. However I want to use it more like a spinner. I can't really predict when the task will complete. So I need a non determinate progress bar.

jQuery UI progress bar only works when you know how much is done. Is is it possible to use jQuery UI progress bar in such a way that when bar reaches 100% then it starts again.

I have everything theme rolled so it would be nice if I could make jquery UI progress bar work rather than using a different plugin.

Answer 1

You could set a timeout to increase the progress bar value by 5% every few seconds and if it reaches 100% start from 0 .. or reverse the increment to -5% so it goes up and down ...

something like

function progressTimeout() {
   setTimeout(
            function(){ 
                        var pbar = $("#progressbar");
                        var pvalue = pbar.progressbar('option','value');
                        if (pvalue == 100) pvalue = 0;
                        pbar.progressbar('option', 'value',pvalue + 10);

                        if (!/*check if action is complete*/)
                          setTimeout( progressTimeout, 2000 );
                      }, 
            2000
          );
}

Answer 2

As a matter of UI design, please don't change the value of a determinate progress bar to represent an indeterminate one: it's very irritating to see a progress bar apparently going to completion and “... nope! fooled ya!” Indeterminate progress bars on both Mac OS X and Windows have distinct visual representations, and so should yours.

Answer 3

http://www.ajaxload.info/ lets you create several types of customized indeterminate progress bars and spinners. If you really want to use jQuery I guess you could make a custom theme that uses an animated spinner type background for the progress bar.