Easy Page & Element Loader Plugin with jQuery - loader.js

loader.js is an easy, small JQuery plugin to create a loading indicator that works with web pages and specific Html elements.

How to use it:

1. Include jQuery library and the jQuery loader.js plugin's JavaScript & CSS in the web page.

<link href="jquery.loader.css" rel="stylesheet">

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.loader.js"></script>

2. Create a basic loading indicator (spinner) with a fullscreen ovlery which covers the whole web page.

$('body').loader('show');

3. Create a basic loading indicator (spinner) with a fullscreen ovlery which covers a specific container element.

$('.DEMO').loader('show');

4. Available loader options.

$('.DEMO').loader('show', {

// CSS selector
className: 'loader',

// Custom template
tpl: '<div class="{className} hide"><div class="{className}-load"></div><div class="{className}-overlay"></div></div>',

// delay time in ms
delay: 200,

// Shows a loading spinner
loader: true,

// Shows a loading overlay
overlay: true,

// Callbacks
onHide: function () {},
onShow: function () {}

});

5. Public methods.

// Shows a loading indicator
$fn.loader('show', options);

// Hides a loading indicator
$fn.loader('hide', onHide);

---

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