JSFiddle - React, Tailwind, and code Playground

by tomasjurman

HTML

<div id="gameWrapper">
    
    <div id="game"  class="layer">
        <h3>Game</h3>
        <!-- canvas-->
    </div>

    <div id="loader" class="layer">
        <h3>Loading</h3>
        <img src="https://www.voicemailoffice.com/secure/images/loading_transparent.gif" alt="loader" />     
    </div>
    
    

</div>

CSS

#gameWrapper{
    width:400px;
    height:300px;
    position:relative;    
}

.layer{    
    width:100%;
    height:100%;
    position:absolute;
    top:0; left:0;
    text-align:center;
}

#loader{
    background:green;    
}

#game{
    background:blue;    
}

JavaScript

setTimeout(function(){
    //after loaded game assests
    document.getElementById("loader").style.top="-300px";                
},1000)