JSFiddle - React, Tailwind, and code Playground
HTML
<div id="page-preloader"><span class="spinner"></span></div>
<div>content</div>
CSS
#page-preloader {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: gray;
z-index: 100500;
}
#page-preloader .spinner {
width: 32px;
height: 32px;
position: fixed;
left: 50%;
top: 50%;
background: green;
margin: -16px 0 0 -16px;
display: block;
}
JavaScript
$(window).on('load', function () {
var $preloader = $('#page-preloader'),
$spinner = $preloader.find('.spinner');
$spinner.fadeOut();
$preloader.delay(350).fadeOut('slow');
});