JSFiddle - React, Tailwind, and code Playground

HTML

<div class="zt zt-bar ie9">
    <div class="zt-bar-cell-1"></div>
    <div class="zt-bar-cell-2"></div>
    <div class="zt-bar-cell-3"></div>
</div>

CSS

.zt.zt-bar {
    height: 20px;
    width: 100px;
    position: relative;
    display: table;
    border-spacing: 2px;
}
.zt.zt-bar > div {
    background: #01a982;
    display: table-cell;
    height: 90%;
    opacity: 0;
    width: 32%;
    animation-name: zl-loading-bar;
    animation-iteration-count: infinite;
    animation-duration: 1.3s;
}
.zt.zt-bar > div.ie9pulse {
    opacity: 1;
}
.zt.zt-bar > div.zt-bar-cell-1 {
    animation-delay: -0.3s;
}
.zt.zt-bar > div.zt-bar-cell-2 {
    animation-delay: -0.15s;
}
.zt.zt-bar.zt-sm {
    height: 13.33333333px;
    width: 66.66666667px;
}
.zt.zt-bar.zt-lg {
    height: 26.66666667px;
    width: 133.33333333px;
}
.zt.zt-bar.zt-dark > div {
    background: #333333;
}
.zt.zt-bar.zt-white > div {
    background-color: #ffffff;
}
@keyframes zl-loading-bar {
    0%, 60%, 100% {
        opacity: 0;
    }
    30% {
        opacity: 80;
    }
}

JavaScript

setInterval(function() {
    $('.zt-bar-cell-3').animate({ opacity: 0 }, 300);
	$('.zt-bar-cell-1').animate({ opacity: 1 }, 300, function () {
    	$('.zt-bar-cell-1').animate({ opacity: 0 }, 300);
    	$('.zt-bar-cell-2').animate({ opacity: 1 }, 300, function () {
        	$('.zt-bar-cell-2').animate({ opacity: 0 }, 300);
        	$('.zt-bar-cell-3').animate({ opacity: 1 }, 300);
    	});
	});
}, 900);