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

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.

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.

rp

Answer 2

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 3

http://preloaders.net/en/letters_numbers_words is nice and has lots of categories down the left hand menu that offer more than http://ajaxload.info does, plus options of size and background... ajaxload is looking pretty outdated these days.

Answer 4

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.