Add transition layer to JS page

You can directly use the following code ,gif The motion chart needs to be found by yourself , You can use this website to generate dynamic graphs https://www.intogif.com/loading/

<!--  Basic style  -->
 <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>
    
<!--     Transition layer  --start -->
    <div id="loading">
        <div class="item">
            <img class="loading" src="/resources/ges/images/loading-2.gif" alt="">
            <p> Page loading ...</p>
        </div>
    </div>
<!--     Transition layer  --end -->

<script>
    //  Page load transition layer .
    (function init(){
    
        document.onreadystatechange = ()=>{
    
            if(document.readyState == "complete")
                document.querySelector('#loading').className = "loadingNone";
        }
    })()
</script>