JSFiddle - React, Tailwind, and code Playground

by Artem Fox

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi magni fugit explicabo rerum enim nulla ea quos adipisci quidem nisi doloribus sequi rem, officiis cum odit. Quaerat ad labore nisi?</p>
<div id="preloader">
  <div class="cssload-st-loader">
    <span class="cssload-equal"></span>
  </div>
</div>

CSS

#preloader {
	position: fixed;
	z-index: 10000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	opacity: 1;
	transition: all .3s ease-in-out;
}
.done {
	opacity: 0 !important;
}
.hide {
	display: none !important;
}
.cssload-st-loader {
	width: 10em;
	height: 2.5em;
	position: absolute;
	left: 50%;
	margin: -1.25em 0 0 -5em;
	box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
}

.cssload-st-loader:before,
.cssload-st-loader:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1.25em;
	border: 0.25em solid rgba(248,248,220,0.97);
	box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
}

.cssload-st-loader:before {
	left: -0.76923em;
	border-right: 0;
}

.cssload-st-loader:after {
	right: -0.76923em;
	border-left: 0;
}

.cssload-st-loader .cssload-equal {
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -0.5em;
	left: 4.16667em;
	height: 1em;
	width: 1.66667em;
	border: 0.25em solid rgb(249,36,114);
	border-width: 0.25em 0;
	box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	animation: cssload-loading 1.73s infinite ease-in-out;
		-o-animation: cssload-loading 1.73s infinite ease-in-out;
		-ms-animation: cssload-loading 1.73s infinite ease-in-out;
		-webkit-animation: cssload-loading 1.73s infinite ease-in-out;
		-moz-animation: cssload-loading 1.73s infinite ease-in-out;
}



@keyframes cssload-loading {
	0% {
		left: 0;
	}
	50% {
		left: 8.33333em;
	}
	100% {
		left: 0;
	}
}

@-o-keyframes cssload-loading {
	0% {
		left: 0;
	}
	50% {
		left: 8.33333em;
	}
	100%...

JavaScript

document.body.onload = function() {
	setTimeout(function() {
		var preloader = document.getElementById('preloader');
		if (!preloader.classList.contains('done')) {
			preloader.classList.add('done');
			setTimeout(function() {
				preloader.classList.add('hide');
			}, 400);
		}
	}, 500);
}