JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

CSS

.block {
    width: 50px;
    height: 5px;
    margin-bottom: 3px;
    background-color: white;
    border: 1px solid gray;
}

JavaScript

function animate(idx) {
    $($('.block')[idx]).animate({
        backgroundColor: "#ff0000"
    }, 200, function () {
        var idx2 = idx;
        $($('.block')[idx2]).animate({
            backgroundColor: "#ffffff"
        }, 200, function () {});
        if (idx >= $('.block').length - 1) {
            setTimeout(animate(0), 200);
        } else setTimeout(animate(idx + 1), 200);
    });
}

$(document).ready(function () {
    animate(0);
});