<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .pre-loading { background:rgba(248,248,248,0.95); position: fixed; z-index:2; top: 0; right: 0; bottom: 0; left: 0;} .pre-block { text-align: center; position: absolute; z-index: 1; width: 6rem; height: 1rem; font-size: 0.55rem; color: #666; top: 50%; left: 50%; margin: -0.5rem 0 0 -3rem;} .spinner { display: inline-block; vertical-align: middle; margin-right: 0.4em; font-size: 1em; width: 1em; height: 1em; text-align: left; border-radius: 50%; box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .3); } .spinner i{width:10%;height:100%;display:block;} .spinner i:after { position: absolute; clip: rect(0, 1em, 1em, .5em); width: 1em; height: 1em; content: ''; animation: spinner-circle 1s ease-in-out infinite; -webkit-animation: spinner-circle 1s ease-in-out infinite; border-radius: 50%; box-shadow: inset 0 0 0 .1em #3aa8ed; } @keyframes spinner-circle { 0% { transform: rotate(-180deg); } 100% { transform: rotate(180deg); } } @-webkit-keyframes spinner-circle { 0% { -webkit-transform: rotate(-180deg); } 100% { -webkit-transform: rotate(180deg); } } </style> <script> var oHtml=document.getElementsByTagName("html")[0]; var iWidth=document.documentElement.clientWidth; iWidth=iWidth>750?750:iWidth; oHtml.style.fontSize=iWidth/10+"px"; </script> </head> <body> <div class="pre-loading"> <div class="pre-block"> <div class="spinner"><i></i></div> 分类数据读取中... </div> </div> </body> </html>
