Small jQuery Loading Overlay Plugin - Loading Layer

File Size: 6.52 KB
Views Total: 5172
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Small jQuery Loading Overlay Plugin - Loading Layer

Loading Layer is a lightweight jQuery plugin that creates a loading layer/spinner overlaying any Html elements.

Basic Usage:

1. Include the jQuery library and the jQuery loading layer plugin in the Html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="loading.js"></script>

2. Include the required CSS file in the head section of the page.

<link type="text/css" rel="stylesheet" href="loading.css" />

3. Create a loading overlay covering an Html element when the trigger button is clicked on.

<div id="testLayer">

Your content here

</div>

<button type="button" onclick="ViewOverlay()">Click me</button>

<script type="text/javascript">
function ViewOverlay() {
Loading("testLayer");
}
</script>

4. Replace the loading gif with yours in the javascript.

var LoadingImage = "loading_flower.gif";

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