js 页面增加过渡层

flymore96

已于 2022-07-18 10:29:55 修改

阅读量209

点赞数

分类专栏：笔记文章标签： javascript 前端开发语言

于 2022-07-18 10:27:35 首次发布

本文链接：https://blog.csdn.net/flymore96/article/details/125842975

版权

笔记专栏收录该内容

50 篇文章 1 订阅

订阅专栏

可直接使用下面代码，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>