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?



Answers

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.

By : Neek


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

By : rp.


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.

By : Rob


This video can help you solving your question :)
By: admin