JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<div>
    <ul class="loader">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

SCSS

ul {
    width: 100px;
    li {
        background-color: #ddd;
        display: inline-block;
        width: 10px;
        height: 10px;
        &.active {
            background-color: #179159;
        }
    }
}

JavaScript

$(function () {
    var moveActiveBlock = function () {
        var numBlocks = $('.loader').find('li').length,
            currentIndex = $('.loader').find('.active').index();
        
        if (currentIndex === numBlocks) {
            $('.loader .active').removeClass('active').eq(0).addClass('active');
        } else {
            $('.loader').find('li').eq(currentIndex).removeClass('active').end().eq(currentIndex + 1).addClass('active');
        }
    };
    var loop = function () {
        setInterval(moveActiveBlock, 80);
    };

    loop();
});