Best way to have 'busy waiting' animation

Question

I intend to have a busy waiting spinner as per shown in this post: How to show loading spinner in jQuery? - since it's the cleanest and easiest to implement:

 $('#loadingDiv')
        .hide()  // hide it initially
        .ajaxStart(function() {
            $(this).show();
        })
        .ajaxStop(function() {
            $(this).hide();
        })
    ;

and couple it up with the animations from http://www.ajaxload.info/

I have multiple "views" in my page i.e., different parts of my page can be updated/modified with the corresponding ajax calls.

I'd like to "position" this #loadingDiv close to where the 'action is' so to speak. How should I go about doing it?

Few things that come to mind:

1. Have multiple divs all over the place and have them hidden and show them per element as per the corresponding action - seems naive and wasteful
2. Have an empty <span></span> to 'hold' the #loadingDiv - show it when something happens in that span. I don't know how to do this though...
3. Something else??

Basically how best to approach positional busy waiting/signalling rather than have a single global one? Or is the single-global option preferred i.e., To have a "fixed" div, hidden show up on the top/center of the page for every activity?

Just want to know which option most of you have used/preferred to tackle something like that and how do you suggest I go about it...

Answer 1

There are some things to consider:

Can the user cause problems if he interacts with other parts of the page while the request is loading?

In this case block the whole UI with a lightbox like transparent overlay.

Are the actions tiny and small, irrelevant to the rest of the application?

Use the local, positioned spinner. If it's a button, change the button's contents from eg. "Save row" to "Saving..." with a spinner.

If the request is significant but you want to let the user to mess around, and the GUI is complex

You can overlay only parts of the screen. http://sfiddle.net/Lv9y5/39/

Local updates, the non blocking way

Use jQuery.position to create a Spinner object from scratch. It should have a .show(node) and .hide() method, and maybe a .setMessage(txt); The DOM reference passed to the show method is the element the user clicked on. With the reference, you can use jQuery .position() to determine where to absolute position the loading div. The loading div should be placed after the BODY element.