JSFiddle - React, Tailwind, and code Playground

HTML

<p><span class="myLoader loaderBars"><span></span></span></p>

CSS

span.myLoader {
	width: 50px; height: 50px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
span.loaderBars:before, 
span.loaderBars span, 
span.loaderBars:after {
	content: '';
	position: absolute;
	left: 0; top: 0;
	width: 10px; height: 30px;
	-webkit-animation: growLoader 1s linear infinite;
	animation: growLoader 1s linear infinite;
}
span.loaderBars:before {
	background-color: #000000;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
span.loaderBars span {
	background-color: red;
	left: 30px;
	-webkit-animation-delay:  -0.33s;
	animation-delay: -0.33s;
}
span.loaderBars:after {
	background-color: blue;
	left: 15px;
	-webkit-animation-delay: -0.66s;
	animation-delay: -0.66s;
}



@-webkit-keyframes growLoader {
	0% {-webkit-transform: scaleY(0); transform: scaleY(0); opacity: 0;}
	50% {-webkit-transform: scaleY(1); transform: scaleY(1); opacity: 1;}
	100% {-webkit-transform: scaleY(0); transform: scaleY(0); opacity: 0;}
}
@keyframes growLoader {
	0% {-webkit-transform: scaleY(0); transform: scaleY(0); opacity: 0;}
	50% {-webkit-transform: scaleY(1); transform: scaleY(1); opacity: 1;}
	100% {-webkit-transform: scaleY(0); transform: scaleY(0); opacity: 0;}
}