废话不多说了、直接给大家贴代码了、具体代码如下所示：
<div class = loading> <p> 100 <span> </span> </p> </div>
*{マージン：0;パディング：0;} .loading {height：100％; width：100％; position：sixt; background：rgba（255,255,255,1）; } .loading> p {position：absolute; reft：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：aspolute：display; display：block; height：140px; width：140px; margin：10px; border-radius：50％; -webkit-box-shadow ：0 2px 3px RGBA（102,197,37,0.8）;アニメーション：1S Infiniteのロード;左：0; TOP：0;} @KeyFramesロード{0％{変換：回転（0DEG）} 100％{変換：回転（360DEG）}}}<div class = loading> <p> <i> </i> <i> </i> <i> </i> <i> </i> <i> </i> </p> </ div>
*{マージン：0;パディング：0;} .loading {height：100％; width：100％; position：sixt; background：rgba（255,255,255,0.95）; } .loading> p {position：aspolute; reft：0; right：0; top：0; bottom：0; margin：auto; height：30px; width：120px;} loading> pi {display：block; float：左;マージン：0 5px;幅：5px;高さ：30px;背景：＃f00;変換：scaley（0.3）;アニメーション：1秒の容易な無限の代替。 } .loading> pi：nth-child（2）{animation-delay：0.1s;}。ロード> pi：nth-child（3）{animation-delay：0.2s;}。ロード> pi：nth-child（ 4）{animation-delay：0.3s;}。ロード> pi：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等待加载动画效果、希望对大家有所帮助、如果大家有任何疑问请给我留言、小编会及时回复大家的。在此也非常感谢大家对vevb武林网网站的支持！