废话不多说了 ， 直接给大家贴代码了 ， 具体代码如下所示:
<div class = charging> <p> 100 <span> </span> </p> </div>
* {marge: 0; rembourrage: 0;} .Loading {hauteur: 100%; largeur: 100%; position: fixe; fond: RGBA (255,255,255,1); } .loading> p {position: absolue; gauche: 0; droite: 0; en haut: 0; en bas: 0; marge: auto; hauteur: 160px; largeur: 160px; texte-adign: central; line-height: 160px; Font-Size: 30px; couleur: # f00;} .loading p span {position: absolu; affichage: bloc; hauteur: 140px; largeur: 140px; marge: 10px; border-radius: 50%; - webkit-box-shadow : 0 2px 3px RGBA (102,197,37,0,8); Animation: chargement faciliter 1s infinite; gauche: 0; top: 0;} @KeyFrames Loading {0% {transform: rotate (0deg)} 100% {transform: rotate (360Deg)}}<div class = charging> <p> <i> </i> <i> </i> <i> </i> <i> </i> <i> </i> </p> </ div>
* {marge: 0; rembourrage: 0;} .loading {hauteur: 100%; largeur: 100%; position: fixe; fond: RGBA (255,255,255,0,95); } .loading> p {position: absolue; gauche: 0; droite: 0; en haut: 0; en bas: 0; marge: auto; hauteur: 30px; largeur: 120px;} .loading> pi {affichage: bloc; float: gauche; marge: 0 5px; Largeur: 5px; hauteur: 30px; arrière-plan: # f00; transformée: échelle (0,3); Animation: Chargement 1S Emplacer l'infini alternative; } .loading> pi: nth-child (2) {animation-delay: 0.1s;}. Chargement> pi: nth-child (3) {animation-delay: 0.2s;}. Chargement> pi: nth-child ( 4) {Animation-delay: 0.3s;}. Chargement> 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 == 'complet') {$ ('. Loading'). fadeout (); }} </ script>总结以上所述是小编给大家介绍的 html5 等待加载动画效果 ， 希望对大家有所帮助 ， 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的。在此也非常感谢大家对 vevb 武林网网站的支持！