如何利用HTML5实现等待加载动画的效果

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

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

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

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

其实我想做的是加载进度条效果，又没有特别好的办法，判断图片这种总感觉比较低级。

这是代码，有完美解决方案了解决。

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

以上就是如何利用HTML5实现等待加载动画的效果的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！