JQuery gray overlay with loading spinner plugin
From Mike A. Leonetti
The idea here is to create a gray overlay div that would either load inside or on top of another div so that it could disable all of the items underneath. This way if the user submitted a form and that form data was being transmitted using AJAX, the whole form would appear under the gray overlay and the spinner would be in the center of that to show that there is activity.
- Some version of JQuery
The files can be downloaded from here: http://www.mikealeonetti.com/files/loadover.zip
To use overlay define the includes in the header after you include the JQuery library:
To start the load over in motion use:
Then, to stop the load over use:
Note that you can call this as many times as you want in a single page and they will all work independently of each other.
It is noteable that the loading image that I use in the script is actually from Fancybox, which is an awesome little script itself.