分享一款CSS全屏加载特效

忘记以前在哪个网站扒下来的了，反正个人感觉挺好看的，后续我可能会加在本主题上 [emoji:1f921]

效果展示：

代码：

HTML放在 body 开头即可

    <!-- 懒加载组件 -->
    <div id="loading">
        <div class="loading">
            <div style="--x:0"></div>
            <div style="--x:1"></div>
            <div style="--x:2"></div>
            <div style="--x:3"></div>
            <div style="--x:4"></div>
            <div style="--x:5"></div>
        </div>
    </div>

CSS代码

JS代码
最后加载完成使用js删除，放在 body 尾部即可。

    <script>
        // 停止懒加载，展示页面
        window.addEventListener('load', function () {
            var loading = document.getElementById('loading');
            loading.parentNode.removeChild(loading);
        });
    </script>