#### Page blocking

    <button id="block-page" class="mr-2 btn btn-primary">Block the whole page</button>

    $('#block-page').on('click', function() {
        $.blockUI({
            message: '<svg> ... </svg>',
            fadeIn: 800,
            timeout: 2000, //unblock after 2 seconds
            overlayCSS: {
                backgroundColor: '#1b2024',
                opacity: 0.8,
                zIndex: 1200,
                cursor: 'wait'
            },
            css: {
                border: 0,
                color: '#fff',
                zIndex: 1201,
                padding: 0,
                backgroundColor: 'transparent'
            }
        });
    });

#### Layout area blocking

    <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: 0.8,
                cursor: 'wait'
            },
            css: {
                border: 0,
                color: '#fff',
                padding: 0,
                backgroundColor: 'transparent'
            }
        });
    });

#### Growl

BlockUI Growl Notification

    <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,
            }
        });
    });

#### Message position

    <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: 0.8,
                cursor: 'wait'
            },
            css: {
                width: 35,
                top: '15px',
                left: '',
                right: '10px',
                bottom: 0,
                border: 0,
                padding: 0,
                backgroundColor: 'transparent'
            }
        });
    });

#### Auto Unblocking

    <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: 0.8,
                cursor: 'wait'
            },
            css: {
                border: 0,
                padding: 0,
                backgroundColor: 'transparent'
            }
        });
    });

#### onBlock callback

    <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: 0.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.');
            }
        });
    });

#### Block with default message

    <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: 0.8,
                cursor: 'wait'
            },
            css: {
                border: 0,
                padding: 0,
                color: '#e7515a',
                backgroundColor: 'transparent'
            }
        });
    });

#### Message Animation

    <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: 0.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);
        });
    });

#### Modal

##### Modal title

Email address We'll never share your email with anyone else.
Password
Check me out

    <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'
            }
        });
    });

#### Custom Overlay

    <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'
            }
        });
    });

#### Custom Style

    <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'
            }
        });
    });

#### Multiple Message

Loading

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