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

实现loading 加载提示 ······ 透明遮罩 居中效果

具体代码如下：

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>

HTML部分：

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

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("导入失败!");
                }
            });
}

参考博客：http://www.jb51.net/article/28170.htm