JSFiddle - React, Tailwind, and code Playground

by spidercoder

HTML

<div id="bubbles">
    <div class="bubble bubble-1"></div>
    <div class="bubble bubble-2"></div>
    <div class="bubble bubble-3"></div>
    <div class="bubble bubble-4"></div>
    <div class="bubble bubble-5"></div>
    <div class="bubble bubble-6"></div>
    <div class="bubble bubble-7"></div>
</div>

CSS

.bubble{
    width: 100px;
    height: 100px;
    margin: 10px;
    float: left;
    border: 1px solid black;
    background: white;
}

.bubble.show{
    background: gray;
}

JavaScript

$(function() {
    var bubbleCurrent = 1,
        bubbleCount = $('#bubbles').children().length,
        reverse = false;

    var bubbleInterval = setInterval(function(){
        $(".bubble.show").removeClass('show');
        $('.bubble-' + bubbleCurrent).addClass('show');
        
        if(bubbleCurrent == bubbleCount){
         reverse = true;
        }
        else if(bubbleCurrent == 1){
         reverse = false;
        }
        
        if(!reverse){
         bubbleCurrent++;   
        }
        else{
         bubbleCurrent--;   
        }
        
    }, 1000);
});