Signal Bars

<div class="nuda-signal-bars" role="img" aria-label="Signal strength 3 of 4">
  <span class="nuda-signal-bars__bar" data-active="true"></span>
  <span class="nuda-signal-bars__bar" data-active="true"></span>
  <span class="nuda-signal-bars__bar" data-active="true"></span>
  <span class="nuda-signal-bars__bar" data-active="false"></span>
</div>

/* Signal Bars
   Animated signal strength indicator.
   Customize: --signal-active, --signal-inactive */

.nuda-signal-bars {
  --signal-active: #22c55e;
  --signal-inactive: rgba(255, 255, 255, 0.15);
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}

.nuda-signal-bars__bar {
  width: 5px;
  background: var(--signal-inactive);
  border-radius: 2px;
  transform-origin: bottom;
  animation: nuda-signal-grow 0.5s ease-out both;
}

.nuda-signal-bars__bar:nth-child(1) { height: 25%; }
.nuda-signal-bars__bar:nth-child(2) { height: 50%; animation-delay: 0.08s; }
.nuda-signal-bars__bar:nth-child(3) { height: 75%; animation-delay: 0.16s; }
.nuda-signal-bars__bar:nth-child(4) { height: 100%; animation-delay: 0.24s; }

.nuda-signal-bars__bar[data-active="true"] {
  background: var(--signal-active);
}

@keyframes nuda-signal-grow {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-signal-bars__bar {
    animation: none;
  }
}