JQuery gray overlay with loading spinner plugin

From Mike A. Leonetti

Jump to: navigation, search

I searched the Internet (using Google) and couldn't find anything on a JQuery/JavaScript loading spinner they created a gray overlay the way I wanted it. I found tons of articles on how to make a loading spinner, but none of them what I wanted.

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.

Contents

Requirements

  • A JavaScript enabled browser :D
  • Some version of JQuery

Download

The files can be downloaded from here: http://www.mikealeonetti.com/files/loadover.zip

Usage

To use overlay define the includes in the header after you include the JQuery library:

<link href="loadover.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="loadover.js"></script>

To start the load over in motion use:

$('#mydiv').loadOverStart();

Then, to stop the load over use:

$('#mydiv').loadOverStop();

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.

Screenshots

datsbananas.com post comments

Feedback

Any bugs or comments use the Discussion page or contact me. Of course please don't feel afraid to ask for things to work better or cooler. This way I get to learn new things myself!

References

It is noteable that the loading image that I use in the script is actually from Fancybox, which is an awesome little script itself.

Personal tools
Google AdSense