FtMocks

Sometimes we need to block website UI while loading data in Ajax. For this purpose you might have prefer some plugins, but its easy to create this functionality with jQuery and CSS3. Here we are going  to implement this

Block UI - Click here to see DEMO
Multiple Block UI - Click here to see DEMO

Align loading style div or GIF to the middle of page

Make this div as absolute in position. 

Left position : calc (50% - (width of loading div/2))

Right position : calc (50vh - (height of loading div/2))
It should be displayed on top of all elements, So give maximum possible z-index.

Observe below CSS

#blockUiDiv {
    background-color: transparant;
    width:194px;
    height:194px;
    position:absolute;
    left:calc(50% - 97px);
    top:calc(50vh - 97px);
    display:none;
    z-index: 20001;
}

#blockUiDiv img {
    width:194px;
    height:194px;
}

The above loading div covers only small amount of area. But we have to block entire screen. So we need backdrop for this div. This backdrop should cover entire screen, So make this as fixed at (0,0)  with 100% width and 100vh height. z-index of this backdrop must be less than above loading div

Observe below CSS

#blockUiBackdrop {
    height: 100vh;
    width: 100%;
    z-index: 20000;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    opacity: 0.5;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    display:none;
}

Block UI and unBlock UI

The below functions represent block and unblock UI functionalities

function blockUi() {
    $("#blockUiDiv").show();
    $("#blockUiBackdrop").show();
}

function unBlockUi() {
    $("#blockUiDiv").hide();
    $("#blockUiBackdrop").hide();
}

Click here to see DEMO

Trigger ajax call

This below function blocks UI before it trigger AJAX call and unblock ui after completing ajax call

// this function is for trigger ajax call
// it will block the UI at starting of ajax call and unblock UI at end of ajax call
function triggerAjaxFunction(milliSeconds) {
    blockUi();
    $.ajax({
        type: "GET",
        url: '/GetDelayedText?milliSeconds='+milliSeconds,
        success: function(data) {
            // success response
            alert(data);
        },
        error: function(data) {
            // error response
            alert(data);
        },
        complete: function(data) {
            // end of ajax call
            unBlockUi(); 
        }
    });
}