* { padding:0; margin:0; } .loading { width:100%; height:100%; z-index:100; position:fixed; top:0; left:0; background:#fff; } .pic { width:100px; height:100px; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; border:1px solid blueviolet; font-size:30px; text-align:center; line-height:100px; } .pic span { display:block; width:80px; height:80px; position:absolute; left:10px; top:10px; box-shadow:0 3px 0 #666; border-radius:50%; animation:rotate 1s infinite linear; -webkit-animation:rotate 1s infinite linear; } @-webkit-keyframes rotate { 0% { transform:rotate(0deg) } 100% { transform:rotate(360deg) } ;}}@keyframes rotate { 0% { transform:rotate(0deg) } 100% { transform:rotate(360deg) } ;}}
过渡加载条--有css效果的