Circular progress indicator with jQuery

Question

I need circular progress indicator. Are there any plugins for this and if there is not, how should I implement this kind of plugin?

EDIT:

What I'm looking for is what jQuery UI has in their planning page, but its not yet implemented. I'm just curious if anyone has implemented this before. See item 6 in following image.

http://wiki.jqueryui.com/ProgressIndicator

Answer 1

Like, one of these? You don't need a plugin for that. Just .show() and .hide() it as necessary (or insert it into the DOM, whatever floats your boat).

Answer 2

You can simply toggle it when you make a request. Then when you finish the request restore to initial state.

A simple example on jsFiddle. I used toggle function, but you can use whatever animation you want.

Answer 3

Hey,

What are you loading? A basic example would be:

<div id="loading"></div>
<a href="javascript:void(0);" id="load">Load!</a>

<script type="text/javascript">
    $('#load').click(function(){ // click event on the load link
        $('#loading').html('<img src="/path/to/animation.gif" />'); // display a loading animation where the content goes
        $.get('/file/to/load.php', function(data) { // request content to be displayed
            $('#loading').html(data); // display content
        });
    });
</script>

Cheers