Html5 animation waiting for loading,

Html5 animation waiting for loading,

<div class="loading">         <p>100<span></span></p></div>

    *{margin:0;padding:0;}    .loading{          height:100%;width:100%;position:fixed;background:rgba(255,255,255,1);    }    .loading >p{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;height:160px;width:160px;text-align: center;line-height:160px;font-size: 30px;color:#f00;}    .loading p span{position:absolute;display:block;height:140px;width:140px;margin:10px;border-radius:50%;-webkit-box-shadow:0 2px 3px rgba(102,197,37,0.8); animation:loading ease 1s infinite;left:0;top:0;}     @keyframes loading{       0%{transform:rotate(0deg)}       100%{transform:rotate(360deg)}    }

 

<div class="loading">         <p>  <i></i>  <i></i>  <i></i>  <i></i>  <i></i></p></div>

    *{margin:0;padding:0;}    .loading{          height:100%;width:100%;position:fixed;background:rgba(255,255,255,0.95);    }    .loading >p{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;height:30px;width:120px;}    .loading >p i{display: block;float:left;margin:0 5px; width:5px;height:30px;background:#f00;transform:scaleY(0.3);                   animation:loading 1s ease infinite alternate;    }.loading >p i:nth-child(2){animation-delay:0.1s;}.loading >p i:nth-child(3){animation-delay:0.2s;}.loading >p i:nth-child(4){animation-delay:0.3s;}.loading >p i:nth-child(5){animation-delay:0.4s;}    @keyframes loading{           0,40%,100%{transform:scaleY(0.3);}           20%{transform:scaleY(1);}    }

 

In fact, what I want to do is to load the progress bar effect, but the false progress bar is too bad. There is really no special way to judge the picture.

 

This is the code, and there is a perfect solution.

<script>        document.onreadystatechange=function(){      if(document.readyState=='complete'){         $('.loading').fadeOut();      }    }</script>