JSFiddle - React, Tailwind, and code Playground

HTML

<div id="preloader">
<span><span></span></span>
<div class="ball"></div>
</div><!-- #preloader -->

CSS

.ball {
    margin-top: -10px;
    margin-left: -10px;
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-top:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 35px #2187e7;
	width:50px;
	height:50px;
position: absolute;
top: 50%;
left: 50%;
	-moz-animation:spin .5s infinite linear;
	-webkit-animation:spin .5s infinite linear;
}
.ball1 {
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-top:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 15px #2187e7; 
	width:30px;
	height:30px;
	margin:0 auto;
	position:relative;
	top:-50px;
	-moz-animation:spinoff .5s infinite linear;
	-webkit-animation:spinoff .5s infinite linear;
}
@-moz-keyframes spin {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
	0% { -moz-transform:rotate(0deg); }
	100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
	0% { -webkit-transform:rotate(0deg); }
	100% { -webkit-transform:rotate(-360deg); }
}
#preloader{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}

.active-dock #preloader{
margin-top: -65px; /* dock.height/2 */
}

#preloader > span{
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
	background-color: rgba(0,0,0,0);
	border:5px solid rgba(0,183,229,0.9);
	opacity:.9;
	border-top:5px solid rgba(0,0,0,0);
	border-left:5px solid rgba(0,0,0,0);
	border-radius:50px;
	box-shadow: 0 0 15px #2187e7; 
	-moz-animation:spin .5s infinite linear;
	-webkit-animation:spin .5s infinite linear;
/*background: url(../images/loading_small.gif) no-repeat;*/

}

#preloader > span > span{
display: block;
margin-top: 40px;
font: normal normal 14px/30px 'Open Sans Condensed Bold', Arial,...