JSFiddle - React, Tailwind, and code Playground

HTML

<span id="main_preload"></span>
<div id="wrapper">
<p>CONTENT!</p>
</div>

CSS

#wrapper {
    opacity: 0;
}

#main_preload{
  position: fixed;
  width: 64px;
  height: 64px;
  left: 50%;
}

JavaScript

var preload = $("#main_preload"), 
    w = $(window).width() / 2 - 30, 
    h = $(window).height() / 2 - 30;
preload.html('<p>LOADING...</p>');
preload.css({"top": h + 'px', "left": w + 'px'});
$(window).load(function () {
    setTimeout(function () {
        preload.animate({opacity: "0"}, 50, function () {
            preload.html("")
        });
        $("#wrapper").animate({opacity: "1"}, 50)
    }, 250)
});