busy-load

A simple, but flexible loading-mask plugin for jQuery

Download on Github Download via npm Use cdn

Documentation

See the full documentation on github .

Setup

Use $.busyLoadSetup() to preconfigure busy-load, so you don't have to set your default options all the time.

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

Fullscreen

For a fullscreen-overlay use $.busyLoadFull()

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

Hint: tardis

In former versions of busy-load a tardis-image was included. Due to the package-size, the image was now outsourced. If you want to include it, just use this url on the image-option or download it form there.

Spinners

CSS

Choose one of the built in CSS-spinners.

spinner:

pump

Without any options, the default spinner will be pump

$("#el").busyLoad("show");

spinner:

accordion
$("#el").busyLoad("show", { spinner: "accordion"
});

spinner:

pulsar
$("#el").busyLoad("show", { spinner: "pulsar"
});

spinner:

cube
$("#el").busyLoad("show", { spinner: "cube"
});

spinner:

cubes
$("#el").busyLoad("show", { spinner: "cubes"
});

spinner:

circle-line
$("#el").busyLoad("show", { spinner: "circle-line"
});

spinner:

circles
$("#el").busyLoad("show", { spinner: "circles"
});

spinner:

cube-grid
$("#el").busyLoad("show", { spinner: "cube-grid"
});

Images

Use an image as spinner.

image:

base64
$("#el").busyLoad("show", { background: "rgba(76, 175, 80, 0.73)",
image: "data:image/gif;base64,R0lGODlhQAA..."
});

show

image:

full url
$("#el").busyLoad("show", {
image: "http://cafe-serendipity.com/wp-content/uploads/2018/01/tardis.gif"
});

show

image:

relative url
$("#el").busyLoad("show", {
image: "./tardis.gif"
});

show

Fontawesome

Include the fontawesome-library and use its icons a spinner.

fontawesome:

icon class

add also fa-spin

$("#el").busyLoad("show", {
fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw" });

show

fontawesome:

icon class

add also fa-spin

$("#el").busyLoad("show", {
fontawesome: "fa fa-cog fa-spin fa-3x fa-fw" });

show

Custom

Pass in your own jQuery-Element. Here's a quick example:

let count = 2121; let customElement = $("<div>", { id: "countdown", css: { "font-size" : "50px" }, text: count }); $("#el").busyLoad("show", { background: "brown", custom: customElement }); let interval = setInterval(function(){ count--; customElement.text(count); if (count <= 0) { clearInterval(interval); $("#el").busyLoad("hide"); } }, 1000);

Sizing

Use maxSize & minSize for sizing the spinner. This only works with CSS- & image-spinners.

max/minSize

size

Size a spinner

$("#el").busyLoad("show", {
maxSize: "150px",
minSize: "150px"
});

show

max/minSize

size

Size an image

$("#el").busyLoad("show", {
maxSize: "200px",
minSize: "200px",
background: "rgba(0, 51, 101, 0.83)",
image: "./tardis.gif"
});

show

Text

Add text, position & style it.

text:

LOADING ...

$("#el").busyLoad("show", { text: "LOADING ..."
});

show

spinner:

false

Explicitly hide the spinner.

$("#el").busyLoad("show", { text: "LOADING ...",
spinner: false
});

show

textColor:

color
$("#el").busyLoad("show", {
text: "LOADING ...",
textColor: "white",
color: "red",
background: "brown"
});

show

textPosition:

top
$("#el").busyLoad("show", { text: "LOADING ...",
textPosition: "top"
});

show

textPosition:

bottom
$("#el").busyLoad("show", { text: "LOADING ...",
textPosition: "bottom"
});

show

textPosition:

left
$("#el").busyLoad("show", { text: "LOADING ...",
textPosition: "left"
});

show

textMargin:

size
$("#el").busyLoad("show", {
text: "LOADING ...",
textMargin: "3rem"
});

show

fontSize:

size
$("#el").busyLoad("show", {
text: "LOADING ...",
fontSize: "2rem"
});

show

Animation

animation:

false
$("#el").busyLoad("show", {
animation: false
});

show

animation:

fade
$("#el").busyLoad("show", {
animation: "fade"
});

show

animation:

slide
$("#el").busyLoad("show", {
animation: "slide"
});

show

animationDuration:

slow/fast
$("#el").busyLoad("show", {
animation: "fade",
animationDuration: "slow"
});

show

animationDuration:

time
$("#el").busyLoad("show", {
animation: "fade",
animationDuration: 4000
});

show

Classes

Add your own-classes to the components of the overlay.

containerClass:

class
$("#el").busyLoad("show", {
containerClass: "my-own-container-class"
});

show

containerItemClass:

class
$("#el").busyLoad("show", {
containerItemClass: "my-own-container-item-class"
});

show

spinnerClass:

class
$("#el").busyLoad("show", {
spinnerClass: "my-own-spinner-class"
});

show

textClass:

class
$("#el").busyLoad("show", {
textClass: "my-own-text-class"
});

show

CSS-position

If the calling element has a position of static, busy-load will turn it into relative, because otherwise the overlay would be positioned to a parent element other than static.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

show

©2017 Andreas Stephan