CSS Only Day 5: Wave Bar — Efek Gelombang Loading Bar Tanpa JS

Eksperimen seri CSS Only Day 5: membuat animasi Wave Bar gelombang vertikal yang bergerak dinamis seperti visualizer musik atau audio equalizer menggunakan 100% CSS murni.

Konsep Implementasi

Animasi gelombang dibentuk dari deretan bar vertikal dengan animasi scaleY berulang dan jeda animation-delay bertingkat:

<div class="wave-container">
  <span style="--d: 0.1s;"></span>
  <span style="--d: 0.2s;"></span>
  <span style="--d: 0.3s;"></span>
  <span style="--d: 0.4s;"></span>
  <span style="--d: 0.5s;"></span>
</div>

.wave-container span {
  display: inline-block;
  width: 6px;
  height: 32px;
  background: var(--color-tech-blue);
  border-radius: 4px;
  animation: wave 1s ease-in-out infinite alternate;
  animation-delay: var(--d);
}

@keyframes wave {
  0% { transform: scaleY(0.2); }
  100% { transform: scaleY(1); }
}

Tonton di YouTube Shorts

• Tonton di YouTube Shorts: CSS Only Day 5: Wave Bar