ajax asynchronous request loading

1. Find a loading picture

2. Add style

<style>    
.loadingWrap{    
    position:fixed;    
    top:0;    
    left:0;    
    width:100%;    
    height:100%;    
    z-index:300;    
    background-image:url(${ctx}/webapp/img/loading.gif);    
    background-repeat:no-repeat;    
    background-position:center center;    
    background-color:#000;    
    background-color:rgba(0,0,0,0.5);    
    filter:alpha(opacity=50);    
}    
</style>

3. Ajax call

function downloadTaskPackageRel(projectId){  
    $.ajax({  
        url : ctx + '/exportTaskPackageRel.do',  
        type : 'POST',  
        dataType : 'json',  
        data : {  
            projectId:projectId,  
        },  
        success : function(data) {  
            $("#msg").val(data.msg);  
            downLoadExportFile(data.fileName);  
        },  
        error : function() {  
        },  
        beforeSend: function(){      
            $('<div class="loadingWrap"></div>').appendTo("body");
        },     
        complete: function(){      
           $(".loadingWrap").remove();
        }    
    });  
}  

Reference: https://blog.csdn.net/jwiang/article/details/52850703 Thanks to the author