Wave Bars

<!-- Wave Bars Loader -->
<div class="nuda-wave-bars" role="status" aria-label="Loading">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

/* Wave Bars Loader
   Five bars waving up and down in sequence.
   Customize: --wave-bars-color, --wave-bars-width */

.nuda-wave-bars {
  --wave-bars-color: #60a5fa;
  --wave-bars-width: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 32px;
  padding: 8px;
}

.nuda-wave-bars span {
  width: var(--wave-bars-width);
  background: var(--wave-bars-color);
  border-radius: 2px;
  animation: nuda-wave-bars 1.2s ease-in-out infinite;
  will-change: height, opacity;
}

.nuda-wave-bars span:nth-child(1) { animation-delay: 0s; }
.nuda-wave-bars span:nth-child(2) { animation-delay: 0.1s; }
.nuda-wave-bars span:nth-child(3) { animation-delay: 0.2s; }
.nuda-wave-bars span:nth-child(4) { animation-delay: 0.3s; }
.nuda-wave-bars span:nth-child(5) { animation-delay: 0.4s; }

@keyframes nuda-wave-bars {
  0%, 100% {
    height: 8px;
    opacity: 0.4;
  }
  50% {
    height: 28px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-wave-bars span {
    animation: none;
    height: 16px;
    opacity: 0.6;
  }
}