Fullscreen Loading Indicators with jQuery and CSS3 - HoldOn.js

HoldOn.js is a simple, flexible jQuery plugin for display a fullscreen loading indicator to prevent user interactions while your webpage / application is currently busy.

Features:

• 8 built-in themes including 8 CSS3 based loading spinners.
• You can add your own themes in the CSS.
• Custom content and alert message for the loading indicator.

Basic usage:

1. Load the required HoldOn.css style sheet in the head section of your document.

<link href="/path/to/HoldOn.css" rel="stylesheet">

2. Load jQuery library and the HoldOn.js javascript file at the end of the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="/path/to/HoldOn.js"></script>

3. Display a fullscreen loading indicator covering the whole web page using HoldOn.open() method.

HoldOn.open(OPTIONS);

4. Close the loading indicator manually.

HoldOn.close();

5. Configuration options.

// sk-rect, sk-dot, sk-cube, sk-bounce, sk-circle
// sk-cube-grid, sk-folding-cube, sk-fading-circle or custom
theme:"sk-rect",

// custom content here
content:'',

// loading message here
message:'',

// background color
backgroundColor:"#1847B1",

// text color
textColor:"white",

---

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