jQuery Plugin To Making Loading Overlays On Given Elements - Wait Overlay
File Size: | 6.74 KB |
---|---|
Views Total: | 1912 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.