jQuery Plugin To Making Loading Overlays On Given Elements - Wait Overlay

Wait Overlay is a jQuery plugin that displays a loading / busy overlay with a CSS3 based loading spinner over a specified DOM element to prevent user interaction with part of the webpage.

How to use it:

1. Load the jQuery wait overlay plugin's stylesheet file in the header for basic styles of the loading overlay and spinner.

<link rel="stylesheet" href="jquery.wait-overlay.css">

2. Load jQuery library and the jQuery wait overlay plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jquery.wait-overlay.js"></script>

3. Call the plugin on the target element to show a loading overlay.

$('#el').wait();

4. The method to disable the loading overlay.

$('#el').unwait();

5. Available options to customize the loading overlay.

// the title of the loading overlay
title: "",

// more text about the loading status
text: "",

// extra CSS classes for the loading spinner
extraCssClasses: [],

// position options
overrideGeometry: {
  top: undefined,
  left: undefined,
  width: undefined,
  height: undefined
}

---

This awesome jQuery plugin is developed by fluffynuts. For more Advanced Usages, please check the demo page or visit the official website.