JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loading"><img src="http://bastardchan.org/gif/src/129878332952.gif" /></div>
<div id="content-wrapper">
    <div id="wrap">Heelelloooooo</div>
    <div id="footer"></div>
</div>

CSS

#loading {
    position:fixed; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%;
    background-image:url("img/load/tr.png"); 
    z-index:100;
}
#loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%}
#content-wrapper {
    visibility:hidden;
}

JavaScript

$(function LoadingMethod(){
    
    document.getElementById("content-wrapper").style.visibility="hidden";
    
    var visibvar = document.getElementById("content-wrapper").style.visibility
    $('#loading').fadeOut(500, function() 
    {
        document.getElementById("content-wrapper").style.visibility="visible";
    });
    
});