JSFiddle - React, Tailwind, and code Playground

by nkint

HTML

<span id="clickme">click me</span>
<div class="bar" id="a"></div>
<div class="bar" id="b"></div>
<div class="bar" id="c"></div>
<div class="bar" id="d"></div>

CSS

.bar {
 width:100px;
 height:10px;   
}

JavaScript

// init the document
$(".bar").each(function () {
    var hue = 'rgb(200,215,'+getRandomInt(0,255)+')';
    $(this).css("background-color", hue);
});

engine = new Engine(); 
    
$("#clickme").bind('click', function() {
    $(".bar").each(function() {
        engine.add()
        $(this).animate({width:200}, getRandomInt(500, 3000), 
                        engine.oncomplete);                      
    });
});

// utils
function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// animation engine
function Engine() {   
    var self = this;
    this.i = 0;
    this.add = function() {
        self.i++;
    }
    this.oncomplete = function() {
        self.i--;
        if(self.i<=0){
            self.finish();
        }
    }     
    this.finish = function() {
        alert("done!");           
    }
}