jQuery: how to display progress for an indeterminate process?

The documentation on the jQuery progressBar says that this UI widget is not suitable for displaying progress of indeterminate length.

It recommends one of two alternatives:

- an indeterminate pro开发者_JAVA百科gressBar, which is "coming soon".

- a spinner animation

I think a jQuery spinner is a textbox with up/down arrows to inc/dec the value. In other words, an input widget.

That can't be what the doc meant.

using jQuery, How do I display indeterminate progress?

By spinner, I think they mean an animated graphic which endlessly loops, or spins. Like this:

Try this:

<div id="pb"></div>
<script type="text/javascript">
$(document).ready(function () {
    $("#pb").progressbar({ value: 100 });
    IndeterminateProgressBar($("#pb"));
});
function IndeterminateProgressBar(pb) {
    $(pb).css({ "padding-left": "0%", "padding-right": "90%" });
    $(pb).progressbar("option", "value", 100);
    $(pb).animate({ paddingLeft: "90%", paddingRight: "0%" }, 1000, "linear",
        function () { IndeterminateProgressBar(pb); });
}
</script>

More like:

or

I guess this is not a jQuery question... it's just a matter of animation.

You'll probably be fine by displaying an animated image just like the ones available from e.g. Ajax Load

I'm a little late to the party, but here's a plugin that leverages the jQuery UI Progressbar for an indeterminate progress bar:

http://demo.dochoffiday.com/jquery-loader/

Also, there are plans to include the indeterminate feature in the future:

http://blog.jqueryui.com/2010/12/progressbar-api-redesign/