JSFiddle - React, Tailwind, and code Playground

by Dave Hope

HTML

<div id="pre-loader" class="infinity"></div>

CSS

.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
#pre-loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 1019;
}
#pre-loader.infinity {
	background: url(https://sageu.com/sagelearning/img/preloaders/infinity-preloader.gif) center no-repeat #fff;
}
#pre-loader.dots {
	background: url(https://sageu.com/sagelearning/img/preloaders/dots-preloader.gif) center no-repeat #fff;
}

JavaScript

$(window).on('load', function() {
		$("#pre-loader").fadeOut("slow");
	});