31

I need circular progress indicator. How should I implement this?

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.

alt text

http://wiki.jqueryui.com/ProgressIndicator

Matt
  • 74,352
  • 26
  • 153
  • 180
newbie
  • 24,286
  • 80
  • 201
  • 301

4 Answers4

11

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

Matt
  • 74,352
  • 26
  • 153
  • 180
mpen
  • 272,448
  • 266
  • 850
  • 1,236
  • 1
    Sorry my question was maybe little too vague, but what I meant was what jUqery ui team is planning: http://wiki.jqueryui.com/ProgressIndicator see 2 - Visual design 6th item. That kind of circualr progress that tells how many precents are completed. – newbie Oct 11 '10 at 05:32
4

Not jQuery, but you might want to take a look at the Raphaël javascript library, and in-particular the polar clock example, and the 'arc' custom attribute. I've used Raphaël and jQuery together to generate some static circular progress bars before - it works quite nicely.

Matt Austin
  • 2,613
  • 1
  • 27
  • 32
  • Thanks @matt-austin This library looks really cool. I am going to try to implement a little plugin to do a simple timed circular animation with basic options and a callback. I will post an answer here to the project on github if I meet with success. – Connor Doyle Aug 31 '11 at 00:48
2

You could use jQuery to slide the background position around, and use or create the appropriate css sprite image table for it.

of course you'd need to have 100 sprite cells, and then you'd need to compile a list of background position co-ords into an multi-dimensional array/table/dictionary.

progressMeterSpriteCoords = [
 {x: 0, y: 0},      //0%
 {x: -16, y: 0},    //1%
 {x: -32, y: 0},    //2%
  ... etc etc..
 {x: -320, y: -0},  //19%
 {x: 0, y: -16},    //20%
 {x: -16, y: -16},  //21%
 {x: -32, y: -16},  //22%
  ... etc etc..
 {x: -320, y: -16}, //29%
  ... etc etc..
 {x: -320, y: -320} //99%
]
airtonix
  • 4,772
  • 2
  • 38
  • 36
1

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

Claudiu
  • 3,261
  • 1
  • 15
  • 27
  • The href for `#load` should be `/path/to/animation.gif` and you should use `event.preventDefault()` in ` $('#load').click(...)`. - This way the page actually works meaningfully if the user has JS disabled. – Peter Ajtai Oct 10 '10 at 20:27
  • 1
    So, you say that if the user clicks the load link and sees the animation (the actual .gif) if he has JS disabled, that's meaningfull? javascript:void(0) seems to work very well, even in YouTube's API examples... I think it's better doing nothing than leading to an animated gif. – Claudiu Oct 10 '10 at 20:37