loading - Newbie_小白

<!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>
posted on 2017-11-28 17:12 Newbie_小白阅读(173) 评论(0) 编辑收藏举报