废话不多说了 ， 直接给大家贴代码了 ， ： ：
<Div class = Loading> <p> 100 <span> </span> </p> </div>
*{margin: 0; padding: 0;} .Loading {Height: 100%; Lebar: 100%; Posisi: Fixed; latar belakang: rgba (255.255.255,1); } .Loading> p {position: absolute; kiri: 0; kanan: 0; atas: 0; bawah: 0; margin: auto; tinggi: 160px; lebar: 160px; Teks-Align: tengah; garis-line-height: 160px; ukuran font: 30px; warna:#f00;} .Loading p span {position: absolute; display: block; tinggi: 140px; lebar: 140px; margin: 10px; perbatasan-radius: 50%;-webkit-box-shadow : 0 2px 3px RGBA (102.197,37,0,8); Animasi: Memuat Kemudahan 1S Infinite; Kiri: 0; Top: 0;} @KeyFrames memuat {0%{transform: rotate (0deg)} 100%{transform: rotate (360deg)}}<Div class = loading> <p> <i> </i> <i> </i> <i> </i> <i> </i> <i> </i> </p> </i Div>
*{margin: 0; padding: 0;} .Loading {Height: 100%; Lebar: 100%; Posisi: Fixed; latar belakang: rgba (255.255.255.0.95); } .Loading> p {position: absolute; kiri: 0; kanan: 0; atas: 0; bawah: 0; margin: auto; tinggi: 30px; lebar: 120px;} .Loading> pi {display: blok; float: kiri; margin: 0 5px; Lebar: 5px; Tinggi: 30px; Latar Belakang:#F00; Transform: Scaley (0.3); Animasi: Memuat 1s Easy Infinite Alternate; } .Loading> pi: nth-child (2) {animation-delay: 0.1s;}. Loading> pi: nth-child (3) {animation-delay: 0.2s;}. Memuat> pi: nth-child ( 4) {Animation-Delay: 0.3s;}. Loading> pi: nth-child (5) {Animation-Delay: 0.4s;} @keyframes memuat {0,40%, 100%{transform: scaley (0.3); } 20%{transform: scaley (1);}}其实我想做的是加载进度条效果 ， 但是假的进度条太烂 ， 真的又没有特别好的办法 ， ，
这是代码 ， 有完美解决方案了解决。
<script> document.onreadystatechange = function () {if (document.readystate == 'complete') {$ ('. Loading'). fadeout (); }} </script>总结以上所述是小编给大家介绍的 html5 等待加载动画效果 ， 希望对大家有所帮助 ， 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的。在此也非常感谢大家对 vevb 武林网网站的支持！