基于jquery实现页面loading加载效果

1.css样式

代码如下（示例）：

<style type="text/css">
.background { 
    display: block; 
    width: 100%; 
    height: 100%; 
    opacity: 0.4; 
    filter: alpha(opacity=40); 
    background:while; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2000; 
} 
.progressBar { 
    border: solid 2px #86A5AD; 
    background: white url(${pageContext.request.contextPath}/static/image/progressBar_m.gif) no-repeat 10px 10px; 
} 
.progressBar { 
    display: block; 
    width: 160px; 
    height: 28px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-left: -74px; 
    margin-top: -14px; 
    padding: 10px 10px 10px 50px; 
    text-align: left; 
    line-height: 27px; 
    font-weight: bold; 
    position: absolute; 
    z-index: 2001; 
} 
</style>

2.HTML代码

代码如下（示例）：

<div id="background" class="background" style="display: none; "></div> 
<div id="progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div> 

3.JS代码

代码如下（示例）：

$(document).ready(function(){
    var ajaxbg = $("#background,#progressBar");
    $('#uploadCommodityTypeExcel').ajaxSubmit({
                url:'/navi_shellplus/shop/testTypeExcel',
                data:$('#uploadCommodityTypeExcel').serialize(),
                type:"POST",
                beforeSend:function()
                {  
                    ajaxbg.show(); 
                },
                success:function(msg)
                {
                    ajaxbg.hide(); 
                    alert(msg.resultMsg);
                },
                error:function(){
                    ajaxbg.hide(); 
                    alert("导入失败!");
                }
            });
}

效果图如下

​​​​​​​

加载图

​​​​​​​