JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<chart>
  <bar class='bar1'></bar>
  <bar class='bar2'></bar>
  <bar class='bar3'></bar>
  <bar class='bar4'></bar>
  <bar class='bar5'></bar>
</chart>

CSS

@keyframes wave {
  0%, 100% { height: { 0px; } }
  50% { height: 22px; }
}

chart {
  display: flex;
  width: 32px;
  justify-content: space-between;
  align-items: flex-end;
  padding: 3px 3px 0 3px;
  height: 30px;
}

chart bar {
  width: 5px;
  height: 10px;
  background: Crimson;
  animation: wave 1s infinite;
}

chart bar.bar1 { animation-delay 0s; animation-duration: 1s; }
chart bar.bar2 { animation-delay 0.2s; animation-duration: 0.8s; }
chart bar.bar3 { animation-delay 0.3s; animation-duration: 1.2s; }
chart bar.bar4 { animation-delay 0.4s; animation-duration: 0.5s; }
chart bar.bar5 { animation-delay 0.5s; animation-duration: 1.4s; }