<button id="block-content" class="mr-2 btn btn-primary message">Layout area blocking</button>$('#block-content').on('click',function(){var block = $('#reload');$(block).block({message:'<svg> ... </svg>',timeout:2000,//unblock after 2 seconds overlayCSS:{backgroundColor:'#000',opacity:.8,cursor:'wait'},css:{border:0,color:'#fff',padding:0,backgroundColor:'transparent'}})});

<button id="block-growl" class="mr-2 btn btn-primary message">Growl</button><div class="blockui-growl-message"><i class="flaticon-exclamation"></i> BlockUI Growl Notification </div>// Growl notification $('#block-growl').on('click',function(){$.blockUI({message:$('.blockui-growl-message'),fadeIn:700,fadeOut:700,timeout:3000,//unblock after 3 seconds showOverlay:false,centerY:false,css:{width:'250px',backgroundColor:'transparent',top:'20px',left:'auto',right:'20px',border:0,opacity:.95,zIndex:1200,}})});

<button id="message-position" class="mr-2 btn btn-primary">Message position</button>$('#message-position').on('click',function(){var block = $('#m-s-reload');$(block).block({message:'<svg> ... </svg>',timeout:2000,//unblock after 2 seconds centerX:0,centerY:0,overlayCSS:{backgroundColor:'#fff',opacity:.8,cursor:'wait'},css:{width:35,top:'15px',left:'',right:'10px',bottom:0,border:0,padding:0,backgroundColor:'transparent'}})});

<button id="auto-unblock" class="mr-2 btn btn-primary">Auto Unblock</button>$('#auto-unblock').on('click',function(){var block = $('#a-u-reload');$(block).block({message:'<svg> ... </svg>',timeout:2000,//unblock after 2 seconds overlayCSS:{backgroundColor:'#fff',opacity:.8,cursor:'wait'},css:{border:0,padding:0,backgroundColor:'transparent'}})});

<button id="block-callback" class="mr-2 btn btn-primary">onBlock callback</button>$('#block-callback').on('click',function(){$.blockUI({message:'<svg> ... </svg>',fadeIn:800,timeout:2000,//unblock after 2 seconds overlayCSS:{backgroundColor:'#1b2024',opacity:.8,zIndex:1200,cursor:'wait'},css:{border:0,color:'#fff',zIndex:1201,padding:0,backgroundColor:'transparent'},onBlock:function(){alert('Page is now blocked. FadeIn completed.')}})});

<button id="default-message" class="mr-2 btn btn-primary">Default Message</button>$('#default-message').on('click',function(){var block = $('#d-t-reload');$(block).block({message:'<span class="text-semibold">Please wait...</span>',timeout:2000,//unblock after 2 seconds overlayCSS:{backgroundColor:'#fff',opacity:.8,cursor:'wait'},css:{border:0,padding:0,color:'#e7515a',backgroundColor:'transparent'}})});

<button class="mr-2 btn btn-primary" id="message-animation" data-animation="fadeInDown">Message Animation</button><div class="blockui-animation-container"><span class="text-semibold"><svg>... </svg></span></div>$('#message-animation').on('click',function(){var block = $(this).parent();$(block).block({message:$('.blockui-animation-container'),timeout:3000,//unblock after 3 seconds overlayCSS:{backgroundColor:'#fff',opacity:.8,cursor:'wait'},css:{width:36,height:36,color:'#000',border:0,padding:0,backgroundColor:'transparent'}});var animation = $(this).data("animation");$('.blockui-animation-container').addClass("animated "+animation).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",function(){$(this).removeClass("animated "+animation)})});

<button class="mr-2 btn btn-primary message" data-toggle="modal" data-target="#exampleModal">Modal</button>

$('#modal-blockui').on('click', function() {
    var block = $('#modal-reload');
    $(block).block({ 
        message: '<svg>... </svg>',
        showOverlay: false,
        timeout: 2000, //unblock after 2 seconds
        css: {
            border: 0,
            color: '#000',
            padding: 0,
            backgroundColor: 'transparent'
        }
    });
});

<button id="overlay-custom" class="mr-2 btn btn-primary">Overlay</button>

$('#overlay-custom').on('click', function() {
    var block = $('#custom-overlay');
    $(block).block({ 
        message: '<svg>... </svg>',
        timeout: 2000, //unblock after 2 seconds
        overlayCSS: {
            backgroundColor: '#515365',
            opacity: 0.9,
            cursor: 'wait'
        },
        css: {
            border: 0,
            padding: 0,
            color: '#fff',
            backgroundColor: 'transparent'
        }
    });
});

<button id="custom-message" class="mr-2 btn btn-primary">Custom</button>

$('#custom-message').on('click', function() {
    var block = $('#c-style');
    $(block).block({
        message: '<span class="text-semibold"><svg>... </svg></i> Updating data</span>',
        timeout: 2000, //unblock after 2 seconds
        overlayCSS: {
            backgroundColor: '#fff',
            opacity: 0.8,
            cursor: 'wait'
        },
        css: {
            border: 0,
            padding: '10px 15px',
            color: '#fff',
            width: 'auto',
            '-webkit-border-radius': 2,
            '-moz-border-radius': 2,
            backgroundColor: '#0e1726'
        }
    });
});

<button id="multiple-messages" class="mr-2 btn btn-primary">Multiple</button>

<div class="multiMessageBlockUi">
    <i class="flaticon-circle-reload-line spin"></i>
    <span class="text-semibold display-block">Loading</span>
</div>

$('#multiple-messages').on('click', function() {
    var message = $(this).next('.multiMessageBlockUi');
    var block = $(this).parent();
    $(block).block({ 
        message: message,
        overlayCSS: {
            backgroundColor: '#fff',
            opacity: 0.8,
            cursor: 'wait'
        },
        css: {
            width: 100,
            '-webkit-border-radius': 2,
            '-moz-border-radius': 2,
            border: 0,
            padding: 0,
            backgroundColor: 'transparent'
        },
        onBlock: function(){
            clearTimeout();
        }
    });

    window.setTimeout(function () {
       message.html('<svg>... </svg><span class="text-semibold display-block">Loading</span>')
    }, 0); 

    window.setTimeout(function () {
       message.html('<svg>... </svg><span class="text-semibold display-block">Please wait</span>')
    }, 2000); 

    window.setTimeout(function () {
       message.addClass('bg-danger').html('<i class="flaticon-danger-3"></i><span class="text-semibold display-block">Load error</span>')
    }, 4000);

    window.setTimeout(function () {
       $(block).unblock({
        onUnblock: function(){
            message.removeClass('bg-danger')}})},6000)});