JSFiddle - React, Tailwind, and code Playground

by vitorbarbosa

HTML

<div id="loader" class="pageload-overlay show pageload-loading" data-opening="M 40 -21.875 C 11.356078 -21.875 -11.875 1.3560784 -11.875 30 C -11.875 58.643922 11.356078 81.875 40 81.875 C 68.643922 81.875 91.875 58.643922 91.875 30 C 91.875 1.3560784 68.643922 -21.875 40 -21.875 Z">
				<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice">
					<path d="M40,-21.875C11.356078,-21.875,-11.875,1.3560784000000012,-11.875,30C-11.875,58.643922,11.356078,81.875,40,81.875C68.643922,81.875,91.875,58.643922,91.875,30C91.875,1.3560784000000012,68.643922,-21.875,40,-21.875C40,-21.875,40,-21.875,40,-21.875"></path>
				<desc>Created with Snap</desc><defs></defs></svg>
			</div>

CSS

.pageload-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
}

.pageload-overlay.show {
	visibility: visible;
}

.pageload-overlay svg {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.pageload-overlay svg path {
	fill: #fff;
}

.pageload-overlay::after,
.pageload-overlay::before {
	content: '';
	position: fixed;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	visibility: hidden;
	opacity: 0;
	z-index: 1000;
	-webkit-transition: opacity 0.15s, visibility 0s 0.15s;
	transition: opacity 0.15s, visibility 0s 0.15s;
}

.pageload-overlay::after {
	background: #6cc88a;
	-webkit-transform: translateX(-20px);
	transform: translateX(-20px);
	-webkit-animation: moveRight 0.6s linear infinite alternate;
	animation: moveRight 0.6s linear infinite alternate;
}

.pageload-overlay::before {
	background: #4fc3f7;
	-webkit-transform: translateX(20px);
	transform: translateX(20px);
	-webkit-animation: moveLeft 0.6s linear infinite alternate;
	animation: moveLeft 0.6s linear infinite alternate;
}

@-webkit-keyframes moveRight {
	to { -webkit-transform: translateX(20px); }
}

@keyframes moveRight {
	to { transform: translateX(20px); }
}

@-webkit-keyframes moveLeft {
	to { -webkit-transform: translateX(-20px); }
}

@keyframes moveLeft {
	to { transform: translateX(-20px); }
}

.pageload-loading.pageload-overlay::after,
.pageload-loading.pageload-overlay::before {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}