单页面应用首屏加载动画

css & html

html

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/folder.svg"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Title</title>
    <style id="loading-style">
        #Loading {
            top: 50%;
            left: 50%;
            position: absolute;
            -webkit-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
            z-index: 100;
        }

        @-webkit-keyframes ball-beat {
            50% {
                opacity: 0.2;
                -webkit-transform: scale(0.75);
                transform: scale(0.75);
            }

            100% {
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        @keyframes ball-beat {
            50% {
                opacity: 0.2;
                -webkit-transform: scale(0.75);
                transform: scale(0.75);
            }

            100% {
                opacity: 1;
                -webkit-transform: scale(1);
                transform: scale(1);
            }
        }

        .ball-beat > div {
            background-color: #4999ff;
            width: 10px;
            height: 10px;
            border-radius: 100% !important;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            display: inline-block;
            -webkit-animation: ball-beat 0.7s 0s infinite linear;
            animation: ball-beat 0.7s 0s infinite linear;
        }

        .ball-beat > div:nth-child(2n-1) {
            -webkit-animation-delay: 0.35s !important;
            animation-delay: 0.35s !important;
        }
    </style>
</head>
<body>
<div id="Loading">
    <div class="loader-inner ball-beat">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

页面渲染完成后移除加载html

onMounted(() => {
    document.querySelector('#Loading')?.remove()
    document.querySelector('#loading-style')?.remove()
})

SpringCloud

Netty

单页面应用首屏加载动画

css & html

页面渲染完成后移除加载html

单页面应用首屏加载动画 ​

css & html ​

页面渲染完成后移除加载html ​

单页面应用首屏加载动画

css & html

页面渲染完成后移除加载html