js ajax加载进度条代码

最终效果如下图所示，既可以通过pc显示，也可以通过移动终端显示。调用方法也很简单。开始调用：loading . Bao sight . showpageloadingsg(false)，alse代表不切实际的加载指令，true显示加载指令。调用后，调用： loading . Bao sight . hidepageloadingsg()。整个代码中有两个文件，一个是js文件。别忘了介绍jquery.js

Css文件

#_loadMsg{ display:内联块；宽度： 100%;文本对齐：中心；线高： 45;左填充左侧： 20像素显示：无；}#_loading_div {竖排：中间；显示器：内联块；宽度： 100%;高度： 100%;margin: 0自动文本对齐：中心；绝对位置：z-index : 3；线高： 40;opacity: 0.5显示：无；背景： # CCCCCC；} # _ loading _ div span { display : inline-block；宽度： 10px高度： 40px动画-名称：比例尺；-网络套件-动画-名称：比例尺；蚊子动画-名称：比例尺；-ms-animation-name:比例尺；用作复合形式的末尾元音动画-名称：比例尺；动画-时长1.2s-网络套件-动画-持续时间： 1.2s蚊子动画-时长1.2s-ms-动画-时长1.2s-o-动画-时长1.2s动画-迭代-count:无限；-网络套件-动画-迭代-count:无限；蚊子动画-迭代-count:无限；女士动画-迭代-count:无限；用作复合形式的末尾元音动画-迭代-count:无限；} span。项目-1 {背景： # 2ec c71} span。item-2 {背景： # 3498 db} span。项目-3 {背景： # 9b 59 b 6；} span。项目-4 {背景： # e67e 22} span。项目-5 {背景： # c 0392 b；} span。项目-6 {背景： # e74c 3c} span。item-7 {背景： # e74c 8c}.项目-1 {动画-延迟：-1s；-网络套件-动画-延迟：-1s；蚊子动画-延迟：-1s；-ms-动画-延迟：-1s；用作复合形式的末尾元音动画-延迟：-1s；}.项目-2 {动画-延迟：-0.9s；-网络套件-动画-延迟：-0.9s；蚊子动画-延迟：-0.9s；-ms-动画-延迟：-0.9s；用作复合形式的末尾元音动画-延迟：-0.9s；}.项目-3 {动画-延迟：-0.8s；-网络套件-动画-延迟：-0.8s；蚊子动画-延迟：-0.8s；女士动画-延迟：-0.8s；用作复合形式的末尾元音动画-延迟：-0.8s；}.项目-4 {动画-延迟：-0.7s；-网络套件-动画-延迟：-0.7s；蚊子动画-延迟：-0.7s；-ms-动画-延迟：-0.7s；用作复合形式的末尾元音动画-延迟：-0.7s；}.项目-5 {动画-延迟：-0.6s；-网络套件-动画-延迟：-0.6s；蚊子动画-延迟：-0.6s；-ms-动画-延迟：-0.6s；用作复合形式的末尾元音动画-延迟：-0.6s；}.项目-6 {动画-延时：-0.5s；-网络套件-动画-延时：-0.5s；蚊子动画-延时：-0.5s；女士动画-延时：-0.5s；用作复合形式的末尾元音动画-延时：-0.5s；}.项目-7 {动画-延迟：-0.4s；-网络套件-动画-延迟：-0.4s；蚊子动画-延迟：-0.4s；女士动画-延迟：-0.4s；用作复合形式的末尾元音动画-延迟：-0.4s；} @-网络工具包-关键帧比例{ 0%，40%，100% {-moz-transform : Scaley(0.2)；-ms-transform : Scaley(0.2)；-o型变压器： Scaley(0.2)；-web套件-transform : Scaley(0.2)；变换： Scaley(0.2)；} 20%，60% {-moz-transform : Scaley(1)；-ms-transform : Scaley(1)；-o-transform : Scaley(1)；-web套件-transform : Scaley(1)；变换： Scaley(1)；} } @-moz-关键帧比例{ 0%，40%，100% {-moz-transform : Scaley(0.2)；-ms-transform : Scaley(0.2)；-o型变压器： Scaley(0.2)；-web套件-transform : Scaley(0.2)；变换： Scaley(0.2)；} 20%，60% {-moz-transform : Scaley(1)；-ms-transform : Scaley(1)；-o-transform : Scaley(1)；-web套件-transform : Scaley(1)；变换： Scaley(1)；} } @-ms-关键帧比例{ 0%，40%，100% {-moz-transform : Scaley(0.2)；-ms-transform : Scaley(0.2)；-o型变压器： Scaley(0.2)；-web套件-transform : Scaley(0.2)；变换： Scaley(0.2)；} 20%，60% {-moz-transform : Scaley(1)；-ms-transform : Scaley(1)；-o-transform : Scaley(1)；-web套件-transform : Scaley(1)；变换： Scaley(1)；} } @关键帧缩放{ 0%，40%，100% {-moz-transform : Scaley(0.2)；-ms-transform : Scaley(0.2)；-o型变压器： Scaley(0.2)；-web套件-transform : Scaley(0.2)；变换： Scaley(0.2)；} 20%，60% {-moz-transform : Scaley(1)；-ms-transform : Scaley(1)；-o-transform : Scaley(1)；-web套件-transform : Scaley(1)；变换： Scaley(1)；}}js文件

var loading={ Bao sight : { showpageloadingsg :函数(显示消息){ if($(' # _ loading _ div ').长度==0){ $('body ').追加(' div id=' _ loading _ div ' span class=' item-1 '/span span class=' item-2 '/span span class=' item-3 '/span span class=' item-4 '/span class=' item-5 '/span span class=' item-6 '/span span class=' item-7 '/span/div ')；} if($('#_loadMsg ').长度==0){ $('body ').追加(' div id='_loadMsg '正在加载，请稍候./div ')；} if(show message==true | | show message==' true '){ $(' # _ LoadMSg ').show()；} $('#_loading_div ').show()；}，hidepageloadingsg : function(){ $(' # _ loading _ div ').hide()；$('#_loadMsg ').hide()；} }}以上内容是本文的全部叙述，希望大家喜欢。