基于jquery的loading 加载提示效果实现代码

148 阅读 0 评论 98 点赞

我是靠谱客的博主缓慢星星，最近开发中收集的这篇文章主要介绍基于jquery的loading 加载提示效果实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

loading 加载提示 ······ 透明遮罩居中

loading 加载提示······

复制代码代码如下:

 
body{ 
margin: 0; 
font-size: 12px; 
line-height: 100%; 
font-family: Arial, sans-serif; 
} 
.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(progressBar_m.gif) no-repeat 10px 10px; 
} 
.progressBar { 
display: block; 
width: 148px; 
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; 
} 
<div id="background" class="background" style="display: none; "></div> 
<div id="progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div> 
var ajaxbg = $("#background,#progressBar"); 
ajaxbg.hide(); 
$(document).ajaxStart(function () { 
ajaxbg.show(); 
}).ajaxStop(function () { 
ajaxbg.hide(); 
}); 