Best Way To Have 'busy Waiting' Animation Be 'position Configurable' In Jquery? (i.e., Show It Where The Action Is)

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')

Solution 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.