# busy-load
> A flexible jQuery loading-mask
Latest version **0.1.2** (published 2019-02-09) · MIT license · 0 weekly downloads
## Install
```sh
npm install busy-load
pnpm add busy-load
yarn add busy-load
bun add busy-load
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.2 |
| Published | 2019-02-09 |
| First published | 2017-11-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 561.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 84 |
| Author | Andreas Stephan |
| Maintainers | piccard |
| Keywords | jQuery-plugin, loading-mask, overlay, mask, loader |
## Links
- npm: https://www.npmjs.com/package/busy-load
- Repository: https://github.com/piccard21/busy-load
- Issues: https://github.com/piccard21/busy-load/issues
- npm.io page: https://npm.io/package/busy-load
## Alternatives
- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads
## Recent versions
- 0.1.2 (latest) — 2019-02-09
- 0.1.1 — 2018-01-06
- 0.1.0 — 2018-01-06
- 0.0.9 — 2018-01-02
- 0.0.8 — 2018-01-01
- 0.0.7 — 2017-12-05
- 0.0.6 — 2017-11-28
- 0.0.5 — 2017-11-22
- 0.0.4 — 2017-11-21
- 0.0.3 — 2017-11-18
- 0.0.2 — 2017-11-16
- 0.0.1 — 2017-11-16
## README
[](https://travis-ci.org/piccard21/busy-load)
[](https://www.jsdelivr.com/package/npm/busy-load)
# 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](http://tobiasahlin.com/spinkit/)
* 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](https://piccard21.github.io/busy-load/).
## Getting started
Add jQuery
```
```
then busy-load
```
```
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
```
```
### npm
```
npm i busy-load
```
- **HINT**: *busy-load* imports its scss to the bundle, so you will need a [sass-loader](https://github.com/webpack-contrib/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](https://piccard21.github.io/busy-load/).
## 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](https://cafe-serendipity.com)
---
_Source: https://npm.io/package/busy-load · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._