src/index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>配页坊-荣誉出品</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
</head>
<body>
    <style>
    body {
        margin: 0;
    }
    .skeleton {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        background-color: #ededed;
    }
    .skeleton__loading {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        border: 2px solid #fff;
        margin-top: -12px;
        margin-left: -12px;
        border-radius: 50%;
        background-color: transparent;
    }
    .skeleton__loading:after, .skeleton__loading:before {
        position: absolute;
        top: 11px;
        left: 11px;
        content: '';
        height: 2px;
        background-color: #fff;
        -webkit-transform-origin: 1px 1px;
        transform-origin: 1px 1px;
        animation-name: timerhand;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: timerhand;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }
    .skeleton__loading:after {
        width: 10px;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
    }
    .skeleton__loading:before {
        width: 8px;
        -webkit-animation-duration: 8s;
        animation-duration: 8s;
    }
    @-webkit-keyframes timerhand {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes timerhand {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    </style>
    <div class="skeleton"><div class="skeleton__loading"></div></div>
    <div class="js-app"></div>
</body>
</html>