废话不多说了 ， 直接给大家贴代码了 具体代码如下所示 ：
<Div class = Loading> <p> 100 <span> </span> </p> </div>
*{margen: 0; relleno: 0;}. carga {altura: 100%; ancho: 100%; posición: fijo; fondo: rgba (255,255,255,1); } .Loading> p {posición: absoluto; izquierda: 0; derecha: 0; arriba: 0; abajo: 0; margen: auto; altura: 160px; ancho: 160px; text-align: center; line-aguja: 160px; Font-size: 30px; color:#f00;}. Cargue de P-span {posición: absoluto; pantalla: bloque; altura: 140px; ancho: 140px; margen: 10px; border-radio: 50%;-webkit-box-shadow : 0 2px 3px RGBA (102,197,37,0.8); Animación: Cargando facilidad 1S infinito; izquierda: 0; arriba: 0;} @Keyframes Cargando {0%{transformación: rotar (0deg)} 100%{transform: rotar (360deg)}}<div class = loading> <p> <i> </i> <i> </i> <i> </i> <i> </i> <i> </i> </p> <// div>
*{margen: 0; relleno: 0;}. Carga {altura: 100%; ancho: 100%; posición: fijo; fondo: RGBA (255,255,255,0.95); } .Loading> p {posición: absoluto; izquierda: 0; derecha: 0; arriba: 0; abajo: 0; margen: auto; altura: 30px; ancho: 120px;} .caring> pi {display: block; float: izquierda; margen: 0 5px; Ancho: 5px; altura: 30px; fondo:#f00; transformación: escala (0.3); Animación: Cargando 1S ELLE ELLA DEL ALTERNA DE INFINITE; } .Loading> Pi: NTH-Child (2) {Animation-Delay: 0.1s;}. Carging> PI: NTH-Child (3) {Animation-Delay: 0.2S;}. Carga> Pi: nth-child ( 4) {Animation-Delay: 0.3S;}. Carga> PI: NTH-Child (5) {Animation-Delay: 0.4S;} @Keyframes Carging {0,40%, 100%{transformado: escala (0.3); } 20%{Transform: scaley (1);}}其实我想做的是加载进度条效果 ， 但是假的进度条太烂 真的又没有特别好的办法 真的又没有特别好的办法 判断图片这种总感觉比较漏。
这是代码 有完美解决方案了解决。 有完美解决方案了解决。
<script> document.onreadyStateChange = function () {if (document.readyState == 'Complete') {$ ('. Loading'). FadeOut (); }} </script>总结以上所述是小编给大家介绍的 HTML5 等待加载动画效果 ， 希望对大家有所帮助 如果大家有任何疑问请给我留言 如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对 VEVB 武林网网站的支持！