js自已写页面加载等待(首页的拼命加载中和红点圆圈)

    <div class="all-load" id="app_loading">

     <!-- <p class="jiyu">集众所长 如鱼得水 · 集鱼</p> -->

     <div class="loading">

     <span></span>

     <span></span>

     <span></span>

     <span></span>

     <span></span>

     </div>

     <p class="loadtext">拼命加载中 ......</p>

    </div>

     .all -load {

     text -align :center ;

     position :absolute ;

     top : 30 % ;

     width : 100 % ;

     z -index : 888 ;

     }   

     .all -load .loadtext {

     font -size : 14px ;

     margin -top : 25px ;

     color : #999;

     }

     .loading {

     width : 150px ;

     height : 15px ;

     margin : 0 auto ;

     margin -top : 100px ;

     }

     .loading span {

     display : inline -block ;

     width : 15px ;

     height : 100 % ;

     margin -right : 5px ;

     border -radius : 50 % ;

     background : #E8401E;

     -webkit -animation : load 1 . 04s ease infinite ;

     }

     .loading span :last -child {

     margin -right : 0px ;

     }

     @-webkit -keyframes load {

     0 %{

     opacity : 1 ;

     }

     100 %{

     opacity : 0 ;

     }

     }

     .loading span :nth -child(1) {

     -webkit -animation -delay : 0 . 13s ;

     }

     .loading span :nth -child(2) {

     -webkit -animation -delay : 0 . 26s ;

     }

     .loading span :nth -child(3) {

     -webkit -animation -delay : 0 . 39s ;

     }

     .loading span :nth -child(4) {

     -webkit -animation -delay : 0 . 52s ;

     }

     .loading span :nth -child(5) {

     -webkit -animation -delay : 0 . 65s ;

     }