Artigos - Artigos e dicas feito com PHP + Laravel

// Show full page LoadingOverlay
$.LoadingOverlay("show");

// Hide it after 3 seconds
setTimeout(function(){
    $.LoadingOverlay("hide");
}, 3000);

// Let's call it 2 times just for fun...
$("#element").LoadingOverlay("show", {
    background  : "rgba(165, 190, 100, 0.5)"
});
$("#element").LoadingOverlay("show");

// Here we might call the "hide" action 2 times, or simply set the "force" parameter to true:
$("#element").LoadingOverlay("hide", true);

// Font Awesome
$.LoadingOverlay("show", {
    image       : "",
    fontawesome : "fa fa-cog fa-spin"
});

// Text
$.LoadingOverlay("show", {
    image       : "",
    text        : "Loading..."
});
setTimeout(function(){
    $.LoadingOverlay("text", "Yep, still loading...");
}, 2500);

// Progress
$.LoadingOverlay("show", {
    image       : "",
    progress    : true
});
var count     = 0;
var interval  = setInterval(function(){
    if (count >= 100) {
        clearInterval(interval);
        $.LoadingOverlay("hide");
        return;
    }
    count += 10;
    $.LoadingOverlay("progress", count);
}, 300);

// Custom
var customElement = $("<div>", {
    "css"   : {
        "border"        : "4px dashed gold",
        "font-size"     : "40px",
        "text-align"    : "center",
        "padding"       : "10px"
    },
    "class" : "your-custom-class",
    "text"  : "Custom!"
});
$.LoadingOverlay("show", {
    image       : "",
    custom      : customElement
});

Example 5 - Set Defaults

$.LoadingOverlaySetup({
    background      : "rgba(0, 0, 0, 0.5)",
    image           : "img/custom.svg",
    imageAnimation  : "1.5s fadein",
    imageColor      : "#ffcc00"
});

$.LoadingOverlay("show");