Highly Customizable Loading Mask Plugin For jQuery - busy-load

busy-load is a highly customizable jQuery loading indicator plugin which shows an animated loading overlay over a specific element (or the whole page) with custom text, image, or Font Awesome based loading spinners.

See also:

• 10 Best Loading Spinner & Indicator jQuery Plugins
• 10 Best Loading Spinner/Indicator JavaScript & CSS Libraries
• 80+ Best Pure CSS Loading Spinners For Front-end Developers

Installation:

# NPM
$ npm install busy-load --save

How to use it:

1. Include the jQuery busy-load plugin's files on the web page.

<link href="dist/app.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="dist/app.min.js"></script>

2. Include Font Awesome Iconic Font if you want to use Font Awesome icons for the loading spinners.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

3. Show and hide a loading indicator that covers the whole page.

// show
$.busyLoadFull("show", { 
  // options here 
});

// hide
$.busyLoadFull("hide", { 
  // options here 
});

4. Show and hide a loading indicator that covers a specific container.

// show
$("#box").busyLoad("show", { 
  // options here 
});

// hide
$("#box").busyLoad("hide", { 
  // options here 
});

5. Customize the loading indicator with the following options.

{
  spinner: "pump", // pump, accordion, pulsar, cube, cubes, circle-line, circles, cube-grid
  image: false,
  fontawesome: false, // "fa fa-refresh fa-spin fa-2x fa-fw"
  custom: false, // jQuery Object
  color: "#fff",
  background: "rgba(0, 0, 0, 0.21)",
  maxSize: "50px", // Integer/String only for spinners & images, not fontawesome & custom
  minSize: "20px", // Integer/String only for spinners & images, not fontawesome & custom
  text: false,
  textColor: false, // default is color
  textMargin: ".5rem", 
  textPosition: "right", // left, right, top, bottom  
  fontSize: "1rem",
  fullScreen: false, 
  animation: false, // fade, slide
  animationDuration: "fast",  // String, Integer 
  containerClass: "busy-load-container", 
  containerItemClass: "busy-load-container-item", 
  spinnerClass: "busy-load-spinner", 
  textClass: "busy-load-text",  
};

6. Event handlers..

$(document).on('bl.show', function (event, $container, $targetNode) {
  // on show
});

$(document).on('bl.shown', function (event, $container, $targetNode) {
  // after shown
});

$(document).on('bl.hide', function (event, $container, $targetNode) {
  // on hide
});

$(document).on('bl.hidden', function (event, $container, $targetNode) {
  // after hidden
});

Changelog:

2018-02-10

• v0.1.2: production ready

2018-01-06

• multiple elements

2018-01-06

• multiple elements

2018-01-02

• js update

2017-12-06

• Added z-index property

2017-11-29

• JS & CSS update

2017-11-21

• JS & CSS update

---

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