JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

body {
    background-color: #333;
}

ul li {
    height: 50px;
    width: 50px;
}

ul li:nth-child(1) {
    background-color: red;
}

ul li:nth-child(2) {
    background-color: orange;
}

ul li:nth-child(3) {
    background-color: yellow;
}

ul li:nth-child(4) {
    background-color: green;
}

ul li:nth-child(5) {
    background-color: blue;
}

JavaScript

var $items = $('ul > li'),
    i = 0,
    timeBegin,
    timeEnd;

function pulse(progress) {
    
    timeBegin = new Date();
    
    if (progress === true) {
        console.log('yes, progress', progress);
        
        $items.eq(i).animate({
            opacity: 0.2
        }, {
            duration: 500,
            complete: function () {
                timeEnd = new Date();
                $items.eq(i).css('opacity', 1);
                console.log('complete', i);
                i++;
                
                if (i >= $items.length) {
                    i = 0;
                }
                
                var timeElapsed = timeEnd - timeBegin;
                
                console.log('time elapsed', timeElapsed);
                
                if (timeElapsed > 1000) {
                    pulse(false);
                } else {
                    pulse(true);
                }
            }
        });
        
    } else {
        console.log('no progress');
    }
        
}

pulse(true);