Customizable AJAX Loader Plugin For jQuery - Mask Loader

Mask Loader is an easy-to-use jQuery plugin for displaying a loading overlay with a custom loading spinner which covers the whole page or a specified element. Great for creating a custom AJAX loading to prevent user interaction when your web application is currently busy or processing data.

Basic usage:

1. Include the maskloader.css inside your head tag and jquery.maskloader.js just before the closing body tag. Make sure to have jQuery library installed as well.

<link rel="stylesheet" href="dist/maskloader.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/jquery.maskloader.js"></script>

2. Initialize the plugin to mask the whole page with a fullscreen loading overlay.

$('body').maskLoader();

3. Initialize the plugin to mask a specified element with a custom loading overlay.

$('.element').maskLoader();

4. Plugin's default settings.

$('.element').maskLoader({

  // fade effect
  'fade': true,

  // z-inde property
  'z-index': '999',

  // background color of the loading overlay
  'background': 'white',

  // opacity of the loading overlay
  'opacity': '0.6',

  // position property
  'position': 'absolute',

  // custom loading spinner
  'imgLoader': false,

  // If false, you will have to run the "create" function.
  //  Ex: $('body').maskLoader().create(); 
  'autoCreate':true,

  // displayes text alert
  'textAlert':false
  
});

5. Destroy the plugin.

var maskloader = $('.element').maskLoader();
maskloader.destroy();

---

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