JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ajax-loading">
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="bar4"></div>
    <div class="bar5"></div>
    <div class="bar6"></div>
    <div class="bar7"></div>
    <div class="bar8"></div>
</div>

CSS

.ajax-loading {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 25px;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-animation: rotateThis 1s infinite step-start;
    animation: rotateThis 1s infinite step-start;
}
.ajax-loading div {
    position: absolute;
    top: 35px;
    left: 45px;
    width: 10px;
    height: 30px;
    background: #000;
}
.ajax-loading div.bar1 {
    -webkit-transform: rotate(0deg) translate(0, -40px);
    transform: rotate(0deg) translate(0, -40px);
    opacity: 0.12;
}
.ajax-loading div.bar2 {
    -webkit-transform: rotate(45deg) translate(0, -40px);
    transform: rotate(45deg) translate(0, -40px);
    opacity: 0.25;
}
.ajax-loading div.bar3 {
    -webkit-transform: rotate(90deg) translate(0, -40px);
    transform: rotate(90deg) translate(0, -40px);
    opacity: 0.37;
}
.ajax-loading div.bar4 {
    -webkit-transform: rotate(135deg) translate(0, -40px);
    transform: rotate(135deg) translate(0, -40px);
    opacity: 0.5;
}
.ajax-loading div.bar5 {
    -webkit-transform: rotate(180deg) translate(0, -40px);
    transform: rotate(180deg) translate(0, -40px);
    opacity: 0.62;
}
.ajax-loading div.bar6 {
    -webkit-transform: rotate(225deg) translate(0, -40px);
    transform: rotate(225deg) translate(0, -40px);
    opacity: 0.75;
}
.ajax-loading div.bar7 {
    -webkit-transform: rotate(270deg) translate(0, -40px);
    transform: rotate(270deg) translate(0, -40px);
    opacity: 0.87;
}
.ajax-loading div.bar8 {
    -webkit-transform: rotate(315deg) translate(0, -40px);
    transform: rotate(315deg) translate(0, -40px);
    opacity: 1;
}
@-webkit-keyframes rotateThis {
    0% {-webkit-transform:scale(0.5) rotate(0deg);}
    12.5% {-webkit-transform:scale(0.5) rotate(45deg);}
    25% {-webkit-transform:scale(0.5) rotate(90deg);}
    37.5% {-webkit-transform:scale(0.5) rotate(135deg);}
    50% {-webkit-transform:scale(0.5) rotate(180deg);}
    62.5% {-webkit-transform:scale(0.5)...