Example sharing of waiting for loading animation in html5 animation-H5 Tutorial-php.cn

Example sharing of waiting for loading animation in html5 animation

黄舟

Release： 2017-07-27 16:20:42

Original

2590 people have browsed it

Sharing examples of waiting for loading animation in html5 animation

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

Copy after login

*{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)}

    }

Copy after login

<p class="loading">
    
     <p>

  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i></p></p>

Copy after login

    *{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);}

    }

Copy after login

Actually, what I want to do is load the progress bar effect, but the fake progress bar is too bad, and there is really no particularly good way. I always feel that it is leaky to judge the picture.

This is the code, there is a perfect solution.

<script>
    
    document.onreadystatechange=function(){      
    if(document.readyState==&#39;complete&#39;){

         $(&#39;.loading&#39;).fadeOut();


      }


    }</script>

Copy after login

The above is the detailed content of Example sharing of waiting for loading animation in html5 animation. For more information, please follow other related articles on the PHP Chinese website!