busy-load v0.1.2

busy-load

A simple, but flexible loading-mask plugin for jQuery.

• Overlay
  • choose an animation, like fade or slide in
  • fiddle around with plenty of customization options
• Spinners
  • css - select from a collection of pure css-spinners from Tobias Ahlin
  • image - use an image as a spinner
  • custom - pass in your custom jQuery-Element
  • fontawesome - just use the library-icons
• Text
  • show some text
  • position it on top, bottom, left or right of the spinner
  • customize your text, like color, margin, size ...
• ES6
  • because busy-load is completely written in ES6, you can simply require or import it

Demo

You can find some examples here.

Getting started

Add jQuery

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

then busy-load

<script src="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.css" rel="stylesheet">

and call the plugin from your element

$("#some-element").busyLoad("show");

// with options
$("#another-element").busyLoad("show", {
	background: "#000",
	spinner: "cube",
	animation: "slide"
});

$("#some-element").busyLoad("hide");  

// with options
$("#another-element").busyLoad("hide", {
  animation: "fade"
});

Hint

The overlay gets an absolute position, so if your caller element has a position of static, busy-load will turn it into relative.

Installation

cdn

<script src="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/busy-load/dist/app.min.css" rel="stylesheet">

npm

npm i busy-load

• HINT: busy-load imports its scss to the bundle, so you will need a sass-loader.

import

import 'busy-load'; 

require

require('busy-load'); 

copy

• You'll find a normal and a minified version of the js-& css file inside the dist-folder. You can copy them wherever you'd like and include them by a link- and script-tag.

Options

Here's a full list of all the default-options you can use and modify on the plugin:

To see them in action and learn how to use them goto this place.

Events

busy-load includes some basic events

Fullscreen

For a fullscreen-overlay use $.busyLoadFull():

$.busyLoadFull("show");
$.busyLoadFull("hide");

• the method accepts the same options like busyLoad()

Setup

If you don't wanna pass in your options all the time, because it would repeat itself, you can use $.busyLoadSetup:

$.busyLoadSetup({
	animation: "slide",
	background: "rgba(255, 152, 0, 0.86)"
}); 

Defaults

To see the actual default-settings use $fn.busyLoad.defaults:

$.fn.busyLoad.defaults

Setting a new default value:

$.fn.busyLoad.defaults.color = "blue"

License

busy-load is licensed under the MIT License - see the LICENSE file for details.

Author

Andreas Stephan