Friday, February 4, 2011

Javascript spinning wait hourglass-type thing

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?

  • this site will do it for you:

    ajaxload

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

    John Topley : Not when you're booting or shutting down OS X it isn't.
    From contagious
  • 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.

    From Rob
  • 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

    From rp

0 comments:

Post a Comment