ajax发送前加载进度条,js ajax加载时的进度条代码

最终效果如下图所示，pc和移动端都可以展示的，调用方法也很简单，开始调用：loading.baosight.showPageLoadingMsg(false),alse代表不现实加载说明,true展示加载说明.调用完成后调用:loading.baosight.hidePageLoadingMsg(),在整个代码里有两个文件，一个是js文件，一个是css文件。切记不要忘记引入jquery.js

css文件

#_loadMsg{

display: inline-block;

width: 100%;

text-align: center;

line-height: 45;

padding-left: 20px;

display : none;

}

#_loading_div {

vertical-align: middle;

display: inline-block;

width: 100%;

height: 100%;

margin: 0 auto;

text-align: center;

position: absolute;

z-index: 3;

line-height: 40;

opacity: 0.5;

display : none;

background: #CCCCCC;

}

#_loading_div span {

display: inline-block;

width: 10px;

height: 40px;

animation-name: scale;

-webkit-animation-name: scale;

-moz-animation-name: scale;

-ms-animation-name: scale;

-o-animation-name: scale;

animation-duration: 1.2s;

-webkit-animation-duration: 1.2s;

-moz-animation-duration: 1.2s;

-ms-animation-duration: 1.2s;

-o-animation-duration: 1.2s;

animation-iteration-count: infinite;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

-ms-animation-iteration-count: infinite;

-o-animation-iteration-count: infinite;

}

span.item-1 {

background: #2ecc71;

}

span.item-2 {

background: #3498db;

}

span.item-3 {

background: #9b59b6;

}

span.item-4 {

background: #e67e22;

}

span.item-5 {

background: #c0392b;

}

span.item-6 {

background: #e74c3c;

}

span.item-7 {

background: #e74c8c;

}

.item-1 {

animation-delay: -1s;

-webkit-animation-delay: -1s;

-moz-animation-delay: -1s;

-ms-animation-delay: -1s;

-o-animation-delay: -1s;

}

.item-2 {

animation-delay: -0.9s;

-webkit-animation-delay: -0.9s;

-moz-animation-delay: -0.9s;

-ms-animation-delay: -0.9s;

-o-animation-delay: -0.9s;

}

.item-3 {

animation-delay: -0.8s;

-webkit-animation-delay: -0.8s;

-moz-animation-delay: -0.8s;

-ms-animation-delay: -0.8s;

-o-animation-delay: -0.8s;

}

.item-4 {

animation-delay: -0.7s;

-webkit-animation-delay: -0.7s;

-moz-animation-delay: -0.7s;

-ms-animation-delay: -0.7s;

-o-animation-delay: -0.7s;

}

.item-5 {

animation-delay: -0.6s;

-webkit-animation-delay: -0.6s;

-moz-animation-delay: -0.6s;

-ms-animation-delay: -0.6s;

-o-animation-delay: -0.6s;

}

.item-6 {

animation-delay: -0.5s;

-webkit-animation-delay: -0.5s;

-moz-animation-delay: -0.5s;

-ms-animation-delay: -0.5s;

-o-animation-delay: -0.5s;

}

.item-7 {

animation-delay: -0.4s;

-webkit-animation-delay: -0.4s;

-moz-animation-delay: -0.4s;

-ms-animation-delay: -0.4s;

-o-animation-delay: -0.4s;

}

@-webkit-keyframes scale {

0%,40%,100% {

-moz-transform: scaleY(0.2);

-ms-transform: scaleY(0.2);

-o-transform: scaleY(0.2);

-webkit-transform: scaleY(0.2);

transform: scaleY(0.2);

}

20%,60% {

-moz-transform: scaleY(1);

-ms-transform: scaleY(1);

-o-transform: scaleY(1);

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@-moz-keyframes scale {

0%,60% {

-moz-transform: scaleY(1);

-ms-transform: scaleY(1);

-o-transform: scaleY(1);

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@-ms-keyframes scale {

0%,60% {

-moz-transform: scaleY(1);

-ms-transform: scaleY(1);

-o-transform: scaleY(1);

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

@keyframes scale {

0%,60% {

-moz-transform: scaleY(1);

-ms-transform: scaleY(1);

-o-transform: scaleY(1);

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

}

js文件

var loading = {

baosight : {

showPageLoadingMsg : function(showMessage){

if($("#_loading_div").length == 0){

$("body").append('

}

if($("#_loadMsg").length == 0){

$("body").append('

正在加载,请稍候... ...

');

}

if(showMessage == true || showMessage == "true" ){

$("#_loadMsg").show();

}

$("#_loading_div").show();

},hidePageLoadingMsg :function() {

$("#_loading_div").hide();

$("#_loadMsg").hide();

}

}

}

以上内容是本文的全部叙述，希望大家喜欢。

总结

以上是编程之家为你收集整理的js ajax加载时的进度条代码全部内容，希望文章能够帮你解决js ajax加载时的进度条代码所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。