Customizable AJAX Loader Plugin For jQuery - Mask Loader

File Size: 2.88 MB
Views Total: 6693
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="dist/jquery.maskloader.js"></script>

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


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


4. Plugin's default settings.


  // 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(); 

  // displayes text alert

5. Destroy the plugin.

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

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