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.
