JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<div id="chart" class="chart">
  <span class="chart-item" data-w="40.80"></span>
  <span class="chart-item" data-w="28.56"></span>
  <span class="chart-item" data-w="16.93"></span>
  <span class="chart-item" data-w="13.54"></span>
</div>

CSS

.chart {
  width: 100%;
  margin-top: 40px;
  background: #eee;
}
.chart-item {
  display: inline-block;
  width: 0;
  height: 40px;
  border-left: 1px solid #fff;
}
.chart-item:first-child {
  border-left: none;
}
.chart-item:first-child {
  background-color: #0D47A1;
}
.chart-item:nth-child(2) {
  background-color: #1565C0;
}
.chart-item:nth-child(3) {
  background-color: #1976D2;
}
.chart-item:nth-child(4) {
  background-color: #1E88E5;
}
.chart-item:nth-child(5) {
  background-color: #2196F3;
}
.chart-item:nth-child(6) {
  background-color: #42A5F5;
}
.chart-item:nth-child(7) {
  background-color: #64B5F6;
}
.chart-item:nth-child(8) {
  background-color: #90CAF9;
}
.chart-item:nth-child(9) {
  background-color: #BBDEFB;
}
.chart-item:nth-child(10) {
  background-color: #E3F2FD;
}

JavaScript

var delay = 0;

$('#chart .chart-item').each(function() {

    $(this).delay(delay).animate({
    width: $(this).data('w') + '%'
    },500);
    delay += 500;
  
});