JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    	<span>Loading</span>
        <span class="l-1"></span>
        <span class="l-2"></span>
        <span class="l-3"></span>
        <span class="l-4"></span>
        <span class="l-5"></span>
        <span class="l-6"></span>
    </div>

CSS

* {margin: 0; padding: 0}

body {
	font-family: Arial, Helvetica, sans-serif;	
}

#wrapper {
	width: 500px; 
	margin: auto;
	padding-top: 100px;
	text-align: center;
}

#wrapper span {display: block; margin: auto}

#wrapper span[class*="l-"]{
	height : 4px;
	width: 4px;
	background-color: #F00;
	display: inline-block;
	margin: 10px 10px;
	
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	
	webkit-animation: loader 4s infinite;
	-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
	-webkit-animation-fill-mode: both;
	-moz-animation: loader 4s infinite;
	-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
	-moz-animation-fill-mode: both;
	-ms-animation: loader 4s infinite;
	-ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
	-ms-animation-fill-mode: both;
	animation: loader 4s infinite;
	animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
	animation-fill-mode: both;	
}

span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}

@-webkit-keyframes loader {
	0% {-webkit-transform: translateX(-30px); opacity: 0;}
	25% {opacity: 1;}
	50% {-webkit-transform: translateX(30px); opacity: 0;}
	100% {opacity: 0;}
}

@-moz-keyframes loader {
	0% {-moz-transform: translateX(-30px); opacity: 0;}
	25% {opacity: 1;}
	50% {-moz-transform:...