The source of the following is no good explanation of the blogger only tested the phone side
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, User-scalable=no ">
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" >
<meta name= "format-detection" content= "Telephone=no" >
<style>
body{
Width:100%;s
margin:0 Auto;
height:3000px;
}
. div_load
{
width:15px;
height:15px;
float:;
position:fixed;
bottom:52%;
border-radius:8px;
Animation:loading 5s Infinite;
-webkit-animation:loading 5s Infinite;
}
#div1 {
Animation-timing-function:ease;
animation-delay:0s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0s;
Background: #18bc9a;}
#div2 {
animation-delay:0.22s;
Animation-timing-function:ease;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0.22s;
Background: #58d68d}
#div3 {
Animation-timing-function:ease;
animation-delay:0.44s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0.44s;
Background: #3398dc;}
#div4 {
Animation-timing-function:ease;
animation-delay:0.66s;
-webkit-animation-timing-function:ease;
-webkit-animation-delay:0.66s;
Background: #9b58b7;}
@keyframes loading
{
from {left:25%;}
to {left:75%;}
}
@-webkit-keyframes Loading/* Safari and Chrome */
{
from {left:25%;}
to {left:75%;}
}
. ts_load{
Display:block;
width:100%;
height:100%;
position:fixed;
z-index:100;
Background:rgba (0,0,0,0.3);
bottom:0;top:0;left:0;right:0;
}
. last_center{
Position:absolute;
Margin:auto;
}
. load_ts{
Display:block;
position:fixed;
Text-align:center;
bottom:46%;
Font-size:16px;
font-family: Microsoft ya black;
width:100%;
Color: #ffffff;}
</style>
<body>
<div class= "Ts_load";
<div class= "Last_center
<div id= "Div1" class= "Div_load" ></DIV>
<div id= "Div2" class= "Div_load" ></div>
<div id= "Div3" class= "Div_load" ></DIV>
<div id= "div4" class= "Div_load" ></DIV>
<p class= "Load_ts" > Please wait a moment ... </p>
</div>
</div>
</body>
CSS3 Small dots implement loading load masks