废话不多说了 ， 直接给大家贴代码了 ， 具体代码如下所示:
<div class = carregamento> <p> 100 <span> </span> </p> </div>
*{margem: 0; preenchimento: 0;} .Loadeamento {altura: 100%; largura: 100%; posição: fixo; fundo: rgba (255.255,255,1); } .loading> P {Posição: Absolute; esquerda: 0; direita: 0; topo: 0; inferior: 0; margem: Auto; altura: 160px; largura: 160px; text-align: Center; altura da linha: 160px; Size da fonte: 30px; cor:#f00;}. Carregando p span {posição: absoluto; exibição: bloco; altura: 140px; largura: 140px; margem: 10px; radio de borda: 50%;-webkit-box-shadow : 0 2px 3px rgba (102,197,37,0,8); Animação: Carregando a facilidade 1s infinita; esquerda: 0; topo: 0;} @KeyFrames Loading {0%{transform: girate (0deg)} 100%{transform: girtate (360deg)}}<div class = carregamento> <p> <i> </i> <i> </i> <i> </i> <i> </i> <i> </i> </p> </ div>
*{margem: 0; preenchimento: 0;} .Loadeamento {altura: 100%; largura: 100%; posição: fixo; fundo: rgba (255.255.255,0,95); } .loading> P {Posição: Absoluto; esquerda: 0; direita: 0; topo: 0; inferior: 0; margem: auto; altura: 30px; largura: 120px;} .loading> pi {display: block; float: Esquerda; margem: 0 5px; largura: 5px; altura: 30px; fundo:#f00; transform: scaley (0,3); Animação: Carregar 1s ALIFICAR INFINITO ALTERNAMENTO; } .loading> pi: nth-child (2) {animação-delay: 0.1s;}. Carregando> pi: nth-child (3) {animação-delay: 0.2s;}. Carregando> pi: Nth-Child ( 4) {Animação-Delay: 0.3s;}. Carregando> Pi: Nth-Child (5) {Animação-Delay: 0.4s;} @KeyFrames Carregamento {0,40%, 100%{Transform: Scaley (0.3); } 20%{transform: scaley (1);}}其实我想做的是加载进度条效果 ， 但是假的进度条太烂 ， 真的又没有特别好的办法 ， 判断图片这种总感觉比较漏。
这是代码 ， 有完美解决方案了解决。
<SCRIPT> document.onreadystatechange = function () {if (document.readyState == 'complete') {$ ('. carregamento'). fadeout (); }} </script>总结以上所述是小编给大家介绍的 html5 等待加载动画效果 ， ， ， ， ， 小编会及时回复大家的。在此也非常感谢大家对 vevb 武林网网站的支持！