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


Posted in Javascript onSeptember 01, 2011

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

基于jquery的loading 加载提示效果实现代码   基于jquery的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(); 
});

作者:曾祥展
Javascript 相关文章推荐
jQuery链式操作如何实现以及为什么要用链式操作
Jan 17 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
学习javascript文件加载优化
Feb 19 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
Vue.Js中的$watch()方法总结
Mar 23 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
jQuery1.6 类型判断实现代码
Sep 01 #Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 #Javascript
用javascript作一个通用向导说明
Aug 30 #Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 #Javascript
javascript 原型继承介绍
Aug 30 #Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 #Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
Aug 29 #Javascript
You might like
php获取英文姓名首字母的方法
2015/07/13 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
用js实现预览待上传的本地图片
2007/03/15 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
JS简单计算器实例
2015/01/20 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
Python中optionParser模块的使用方法实例教程
2014/08/29 Python
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
补充协议书范本
2014/04/23 职场文书
商场营业员岗位职责
2015/04/14 职场文书
小学运动会宣传稿
2015/07/23 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书