jquery loading遮罩层插件 A flexible loading-mask jQuery-plugin

jQuery之家 返回下载页

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", { background: "rgba(0, 51, 101, 0.83)", image: "tardis", animate: "slide" });
$.busyLoadFull("hide", { animate: "fade" });

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:

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

show

image:

tardis

An image is already included, base64 encoded.

$("#el").busyLoad("show", {
image: "tardis",
background: "rgba(0, 51, 101, 0.83)"
}); show

Fontawesome

Include the fontawesome-library and use its spinners.

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 = 1125; 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"); return; } }, 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"
});

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

textPosition:

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

show

textPosition:

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

show

textPosition:

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

show

textPosition:

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

show

textColor:

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

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 a container has a position of static, busy-load will turn it to 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