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.