css制页面渲染前的loading

最新推荐文章于 2024-03-04 09:49:06 发布

ZoeLinJF

最新推荐文章于 2024-03-04 09:49:06 发布

阅读量421

点赞数

分类专栏： Html5 Css3 js

本文链接：https://blog.csdn.net/ZoeLinJF/article/details/100042551

版权

js 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

Html5

7 篇文章 0 订阅

订阅专栏

Css3

4 篇文章 0 订阅

订阅专栏

<body>

    <div id="spinner"></div>
    
</body>
<script>
    //在页面未加载完毕之前显示的loading Html自定义内容
    var _LoadingHtml = `<div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>`

    document.getElementById('spinner').innerHTML = _LoadingHtml;

    //监听加载状态改变
    document.onreadystatechange = completeLoading;

    //加载状态为complete时移除loading效果
    function completeLoading() {
        // console.log('----------completeLoading-----------' + document.readyState)
        if (document.readyState == "complete") {
            document.body.removeChild(document.getElementById('spinner'))
        }
    }
</script>

</html>

<style>
    #spinner {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 50px;
        height: 60px;
        margin: -25px 0 0 -30px;
        text-align: center;
        font-size: 10px;
        /* z-index: 1000; */
    }
    
    #spinner>div {
        background-color: #278bed;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
        animation: stretchdelay 1.2s infinite ease-in-out;
    }
    
    #spinner .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }
    
    #spinner .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }
    
    #spinner .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }
    
    #spinner .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }
    
    @-webkit-keyframes stretchdelay {
        0%,
        40%,
        100% {
            -webkit-transform: scaleY(0.4);
        }
        20% {
            -webkit-transform: scaleY(1.0);
        }
    }
    
    @keyframes stretchdelay {
        0%,
        40%,
        100% {
            transform: scaleY(0.4);
            -webkit-transform: scaleY(0.4);
        }
        20% {
            transform: scaleY(1.0);
            -webkit-transform: scaleY(1.0);
        }
    }
</style>