基于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 相关文章推荐
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
详解Chart.js轻量级图表库的使用经验
May 22 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
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 at(@)符号的用法简介
2009/07/11 PHP
Jquery中dialog属性小记
2010/09/03 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
jquery中动态效果小结
2010/12/16 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
Express系列之multer上传的使用
2017/10/27 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
Python中的推导式使用详解
2015/06/03 Python
python中的协程深入理解
2019/06/10 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
python生成特定分布数的实例
2019/12/05 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
环境科学专业研究生求职信
2013/10/02 职场文书
党员转正申请报告
2015/05/15 职场文书
团组织推荐意见
2015/06/05 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记