Anti-Apple native loading

An HTML structure

<div class= "ui-page-loading" >     <div class= "Ui-loading-item" >     <div></div>        < div></div>        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>        <div></div>     </div></div>

Two CSS Styles

/*ui-page-loading page local load style */.ui-page-loading {Padding:0.2rem 0;  position:relative; Text-align:center;}. Ui-page-loading::after {content: ' Trying to load ... '; Margin-left:0.2rem;font-size:. 16rem;}. ui-loading-item{position:absolute;left:35%;top:45%;}  @-webkit-keyframes page-loading {50% {opacity:0.3;} 100% {opacity:1;}}  @keyframes page-loading {50% {opacity:0.3;} 100% {opacity:1;}}.  Ui-loading-item > div {background-color: #333;  Width:0.01rem;  Height:0.05rem;  Border-radius:0.02rem;  Margin:0.001rem;          -webkit-animation-fill-mode:both;  Animation-fill-mode:both; Position:absolute;}.  Ui-loading-item > Div:nth-child (1) {top:0.07rem;  left:0;          -webkit-animation:page-loading 1.2s 0.12s Infinite ease-in-out; animation:page-loading 1.2s 0.12s Infinite ease-in-out;  }.ui-loading-item > Div:nth-child (2) {top:0.05rem;  Left:0.05rem;          -webkit-transform:rotate ( -45DEG);  Transform:rotate ( -45DEG); -webkit-animation:page-loading 1.2s 0.24s infInite ease-in-out; animation:page-loading 1.2s 0.24s Infinite ease-in-out;  }.ui-loading-item > Div:nth-child (3) {top:0;  Left:0.07rem;          -webkit-transform:rotate (90DEG);  Transform:rotate (90DEG);          -webkit-animation:page-loading 1.2s 0.36s Infinite ease-in-out; animation:page-loading 1.2s 0.36s Infinite ease-in-out;  }.ui-loading-item > Div:nth-child (4) {top: -0.05rem;  Left:0.05rem;          -webkit-transform:rotate (45DEG);  Transform:rotate (45DEG);          -webkit-animation:page-loading 1.2s 0.48s Infinite ease-in-out; animation:page-loading 1.2s 0.48s Infinite ease-in-out;  }.ui-loading-item > Div:nth-child (5) {top: -0.07rem;  left:0;          -webkit-animation:page-loading 1.2s 0.6s Infinite ease-in-out; animation:page-loading 1.2s 0.6s Infinite ease-in-out;  }.ui-loading-item > Div:nth-child (6) {top: -0.05rem;  Left: -0.05rem;          -webkit-transform:rotate ( -45DEG);  Transform:rotate ( -45DEG); -webkit-animation:page-loading 1.2s 0.72s Infinite ease-in-out; animation:page-loading 1.2s 0.72s Infinite ease-in-out;  }.ui-loading-item > Div:nth-child (7) {top:0;  Left: -0.07rem;          -webkit-transform:rotate (90DEG);  Transform:rotate (90DEG);          -webkit-animation:page-loading 1.2s 0.84s Infinite ease-in-out; animation:page-loading 1.2s 0.84s Infinite ease-in-out;  }.ui-loading-item > Div:nth-child (8) {Top:0.05rem;  Left: -0.05rem;          -webkit-transform:rotate (45DEG);  Transform:rotate (45DEG);          -webkit-animation:page-loading 1.2s 0.96s Infinite ease-in-out; animation:page-loading 1.2s 0.96s Infinite ease-in-out; }/*ui-page-loading page local load style end*/

　　

Anti-Apple native loading