Javascript spinning wait hourglass-type thing

Question

I'd like to indicate to the user of a web app that a long-running task is being performed. Once upon a time, this concept would have been communicated to the user by displaying an hourglass. Nowadays, it seems to be an animated spinning circle. (e.g., when you are loading a new tab in Firefox, or booting in Mac OS X. Coincidentally, the overflowing stack in the stackoverflow logo looks like one quarter of the circle).

Is there a simple way to create this effect using Javascript (in particular, JQuery)? Ideally, I'd like to have one of these little spinners as elements in a table, to indicate to the user that the system is still active in processing a pending task (i.e., it hasn't forgotten or crashed). (Of course, I realize it's possible that the back-end has crashed and the front-end still show as an animating spinning thing, it's more for the psychological purpose of the user seeing activity).

And what do you call that spinning thing, anyways?

Answer 1

this site will do it for you:

ajaxload

and on OS X it's called the "Beachball" and I like to add "Of Death".

Answer 2

I assume you meant something to indicate background activity during an Ajax call.

I tend to have a CSS class which sets the background image to a little animated GIF, with appropriate padding and positioning (remember to turn background-repeat off), and then add and remove that class using a couple of JavaScript helpers called when the Ajax call is started, and when the response callback runs.

Answer 3

Google "Ajax activity indicator" to find lots of images and image generators (the "spinning" image itself is an animated GIF).

Here is one link to get you started: http://www.ajaxload.info/

With the image in hand, use JQuery to toggle the visibility of the image (or perhaps its parent DIV tag). See this link for some more info:

http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/

rp