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)" });
For a fullscreen-overlay use $.busyLoadFull()
$.busyLoadFull("show", { background: "rgba(0, 51, 101, 0.83)", image: "tardis", animate: "slide" });$.busyLoadFull("hide", { animate: "fade" });Choose one of the built in CSS-spinners.
Use an image as spinner.
Include the fontawesome-library and use its spinners.
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);
Use maxSize & minSize for sizing the spinner. This only works with CSS- & image-spinners.
Explicitly hide the spinner.
$("#el").busyLoad("show", { text: "LOADING ...",
spinner: false
});
show
$("#el").busyLoad("show", { text: "LOADING ...",
textPosition: "bottom"
});
show
$("#el").busyLoad("show", {
text: "LOADING ...",
textColor: "white",
color: "red",
background: "brown"
});
show
Add your own-classes to the components of the overlay.
$("#el").busyLoad("show", {
containerItemClass: "my-own-container-item-class"
});
show
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.