Event and jquery-loading-overlay

Posted on: December 18, 2020 09:51 PM

Posted by: Renato

Views: 80

Examples

Example 1 - Whole page Overlay

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

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

 

Example 2 - Single element Overlay

// 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);

Example 3 - Showcase of different elements

// 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");

 

<!-- also link to jquery.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/loadingoverlay.min.js"></script>

<script>
    window.onbeforeunload = function () {
        // Show Loding
        $.LoadingOverlay("show");

        // Disable javascript default confirm message
        //return "Are you sure you wish to leave the page?";
        return undefined;
    };

    // If Canceled by user
    $(document).keyup(function (e) {
        if (e.key === "Escape") {
            $.LoadingOverlay("hide");
        }
    });
</script>

- link: https://gasparesganga.com/labs/jquery-loading-overlay/

- https://gasparesganga.com/labs/jquery-loading-overlay/#animations

- https://github.com/gasparesganga/jquery-loading-overlay

Share
About Author

Renato

Developer

Add a Comment

Comments are disabled!