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:

Property | Description | value | Default value ------------- | ------------- | ------------- | ------------- action | show or hide the overlay | show, hide | - spinner | a CSS-spinner | pump, accordion, pulsar, cube, cubes, circle-line, circles, cube-grid | pump image | use an image as spinner | source for image (location, string) | false fontawesome | use a fontawesome-icon as a spinner | fa fa-refresh fa-spin fa-2x fa-fw | false custom | use a custom jQuery-element as spinner | jQuery-element $("#el") | false color | color of the spinner | color-value | #fff background | background of the overlay | color-value | rgba(0, 0, 0, 0.21) maxSize | max-size of the spinner | size-value | 50px minSize | min-size of the spinner | size-value | 20px text | text next to the spinner | String or false | false textColor | color of the text | color-value | default is color textMargin | margin of the text - works on every textPosition | size-value | false textPosition | where should the text appear | top, bottom, left, right | right animation | use an animation, when overlay appears or hides| fade, slide | false animationDuration | pass in duration of animation | slow, fast, integer in ms | fast containerClass | add a class to the overlay-container | class-name | busy-load-container containerItemClass | add a class to the container-item | class-name | busy-load-container-item spinnerClass | add a class to the spinner | class-name | busy-load-spinner textClass | add a class to the text | class-name | busy-load-text

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

Events

busy-load includes some basic events

Event | Description | parameters
------------- | ------------- | -------------
bl.show | before overlay is shown | event, $container, $targetNode bl.shown | after overlay appeared | event, $container, $targetNode bl.hide | before overlay disappears | event, $container, $targetNode bl.hidden | after overlay is removed from DOM | event, $container, $targetNode

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