js 页面增加过渡层

可直接使用下面代码，gif动图需要自己查找，可以使用此网站生成动图https://www.intogif.com/loading/

<!-- 基础样式 -->
 <style>
    #loading {
    
        position: fixed;
        width: 100%;
        height: 100%;
        background: #ffffff;
        z-index: 1;
        top: 0px;
        left: 0px;
        color: #000000;
    }

    #loading .item {
    
        text-align: center;
        width: 300px;
        height: 100px;
        margin: auto;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }

    .loadingNone {
    
        display: none;
    }

    #loadingContainer .loading{
    
        width: 12%;
        margin-bottom: 12px;
    }

</style>
    
<!--    过渡层 --start -->
    <div id="loading">
        <div class="item">
            <img class="loading" src="/resources/ges/images/loading-2.gif" alt="">
            <p>页面加载中...</p>
        </div>
    </div>
<!--    过渡层 --end -->

<script>
    // 页面加载过度层。
    (function init(){
    
        document.onreadystatechange = ()=>{
    
            if(document.readyState == "complete")
                document.querySelector('#loading').className = "loadingNone";
        }
    })()
</script>