ajax request to add a loading mask layer

js file 

/* ************************************************ ****************Mask Layer Function******************************** ************************************************ */

// Create mask layer function body 
function createMask(){
     var node=document.createElement('div' );
        node.setAttribute('id','backdrop');
        node.style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;background-color:rgba(0,0,0,0.6);";
        node.style.display="none";
    var html='<div style="position: fixed; top: 38%; left: 38%; z-index: 1001;">';
        html+='<div style="text-align:center;">';
        html+='<img src="/Public/Home/images/loader.gif" style="width:60px;height:60px;">';
        html +='<div style="padding-left:10px;font-size:14px;color:#FFF;">Network requesting...</div>' ;
        html+='</div>';
        html+='</div>';
        node.innerHTML=html;
    var body=document.querySelector('body');
        body.appendChild(node);    
}

// Open the mask layer function body 
function showMask(){
     var backdrop=document.getElementById('backdrop' );
        backdrop.style.display='block';
}

// Close the mask layer function body 
function closeMask(){
     var backdrop=document.getElementById('backdrop' );
        backdrop.style.display='none';
}

// Page initialization, open the mask 
createMask();
showMask ();

// Page initialization is complete, close the mask 
document.onreadystatechange = function (){
     if (document.readyState == "complete" ){
        closeMask();
    }
}

 

ajax in hml

$.ajax({       
   beforeSend: function () {
       showMask ();
   },
   success : function(res){
                    
   },
   complete:function () {
       closeMask();
   }
});