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.