JSFiddle - React, Tailwind, and code Playground

HTML

<div id='option1' class='option'></div>

<div id='option2' class='option'></div>

<div id='option3' class='option'></div>

CSS

body {padding:10px;}
.option {width:100px; height:100px; margin-right:20px; background:blue; float:left;}
.disabled {background:green;}

JavaScript

sampleFunction();

function sampleFunction() {
    alert('Start');
    $('#option1').addClass('disabled');

    var i = 0;
    var shift = function() {
        setTimeout(function() {
            $('#option1').toggleClass('disabled');
            $('#option2').toggleClass('disabled');
        }, 0);
        setTimeout(function() {
            $('#option2').toggleClass('disabled');
            $('#option3').toggleClass('disabled');
        }, 400);
        setTimeout(function() {
            $('#option3').toggleClass('disabled');
            $('#option1').toggleClass('disabled');
        }, 800);
    };
    var interval = setInterval(function() {
        ++i;
        if (i == 5) {
            clearTimeout(interval);
            alert('Finished');
        } else {
            shift();
        }
    }, 1200);

    shift();
}