JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">Loading 
<span></span>
<span></span>
<span></span>
</div>

CSS

#parent span{
    width:10px;/* Set width of Box*/
    height:10px;/* Set height of Box */
    border-radius:100px;/* Draw a circle using this radius*/
    background:green;/* Set color to dot */
    margin:50px auto;/* Just an Offset */
    vertical-align:middle; /*Make it center */
    display:inline-block;/* Needed for Span tags to display*/
    -webkit-animation : loading 0.9s infinite alternate; /* animation_name delay no.of.times executionmode */
}
#parent span:nth-of-type(2){
    -webkit-animation-delay: 0.3s;/* Set delay to get progressing effect*/
}
#parent span:nth-of-type(3){
    -webkit-animation-delay: 0.6s;/* Set delay to get progressing effect*/
}
#parent{
    text-align:center;
}
@-webkit-keyframes loading {
    0%{
    opacity:0.9;/* Change transparency */
}
100%{
    opacity:0.1;/* Change transparency */
}
}