JS Ajax when loading the progress bar code _ajax related

The final effect shown in the following figure, the PC and the mobile end can be displayed, the invocation method is also very simple, start calling: Loading.baosight.showPageLoadingMsg (false), Alse represents the unrealistic load description, True to display the load description. Called after the call: LOADING.BAOSIGHT.HIDEPAGELOADINGMSG (), in the entire code has two files, one is a JS file, one is a CSS file. Remember to not 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_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 {BAC
Kground: #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_div"). Length = = 0) {
   $ (' body '). Append (' <div id= "_loading_div" ><span class= "item-1" ></span><span class= " Item-2 "></span><span class=" item-3 "></span><span class=" item-4 class= "item-5" ></span><span class= "item-6" ></span><span class= "item-7" ></span> </div> ');
  if ($ ("#_loadMsg"). Length = = 0) {
   $ ("Body"). Append (' <div id= _loadmsg ' > loading, please wait ... ...</div> ');
  if (ShowMessage = = True | | showmessage = = "true") {
   $ ("#_loadMsg"). Show ();
  $ ("#_loading_div"). Show ();
  },
  hidepageloadingmsg:function () {
  $ ("#_loading_div"). Hide ();
  $ ("#_loadMsg"). Hide ();}}

The above content is the whole narration of this article, Hope everybody likes.