js ajax progress bar code when loading

Using ajax to load the progress bar in the web page allows the user to judge the waiting time in advance, and can also reduce the user's psychological anxiety while waiting for the information to be loaded. Therefore, the progress bar is essential for loading. Here is what I will tell you Introducing how the ajax loading progress bar code is implemented

The final effect is shown in the figure below. It can be displayed on both PC and mobile terminals. The calling method is also very simple. Start calling: loading.baosight.showPageLoadingMsg(false), alse represents unrealistic loading instructions, and true displays loading instructions. After the call is completed, call: loading.baosight.hidePageLoadingMsg(). There are two files in the entire code, one is a js file and the other is a css file. Remember not to forget to introduce jquery.js

css file

#_loadMsg{
 display: inline-block;
 width: 100%;
 text-align: center;
 line-height: 45;
 padding-left: 20px;
 display : none;
}

#_loading_p {
 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_p 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%, 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);
 }
}
@-ms-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);
 }
}
@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);
 }
}

js file

var loading = {
 baosight : {
  showPageLoadingMsg : function(showMessage){
  if($("#_loading_p").length == 0){
   $("body").append(&#39;<p id="_loading_p"><span class="item-1"></span><span class="item-2"></span><span class="item-3"></span><span class="item-4"></span><span class="item-5"></span><span class="item-6"></span><span class="item-7"></span></p>&#39;);
  }
  if($("#_loadMsg").length == 0){
   $("body").append(&#39;<p id="_loadMsg">正在加载,请稍候... ...</p>&#39;);
  }
  if(showMessage == true || showMessage == "true" ){
   $("#_loadMsg").show();
  }
  $("#_loading_p").show();
  },
  hidePageLoadingMsg :function() {
  $("#_loading_p").hide();
  $("#_loadMsg").hide();
  }
 }
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Two solutions to Ajax cross-domain problems

Click to load based on ajaxMore Load this page without refreshing

How to solve ajax failure on Google Chrome browser

The above is the detailed content of js ajax progress bar code when loading. For more information, please follow other related articles on the PHP Chinese website!