JSFiddle - React, Tailwind, and code Playground

by Robbie Wxyz

HTML

<div class="bar" percent="50%" style="background:#f00;"></div>
<div class="bar" percent="10%" style="background:#0f0;"></div>
<div class="bar" percent="30%" style="background:#00f;"></div>
<div class="bar" percent="10%" style="background:#f0f;"></div>

CSS

.bar{
    height:100%;
    float:left;
    opacity:0;
}
body{
    margin:0;
    height:100%;
}
html{
    height:100%;
}

JavaScript

$(document).ready(function(){ 
    var bars = $('.bar');
    bars.each(function(i){
        var widthpercent = $(this).attr("percent");
        $(this).delay(i*800).animate({width:widthpercent,opacity:1,},500);
    });
});