Queue Depth Meter

<div class="nuda-in2-queuedepth" role="status" aria-label="Queue depth: 5 of 8 slots, 5 jobs queued">
  <div class="nuda-in2-queuedepth__bars" aria-hidden="true">
    <span class="is-filled"></span>
    <span class="is-filled"></span>
    <span class="is-filled"></span>
    <span class="is-filled"></span>
    <span class="is-filled is-active"></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <span class="nuda-in2-queuedepth__count">5</span>
  <span class="nuda-in2-queuedepth__label">queued</span>
</div>

.nuda-in2-queuedepth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #161616;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  font-size: 11px;
  color: #cfcfcf;
}

.nuda-in2-queuedepth__bars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nuda-in2-queuedepth__bars span {
  width: 4px;
  height: 14px;
  border-radius: 1px;
  background: rgba(255,255,255,.12);
}

.nuda-in2-queuedepth__bars span.is-filled {
  background: #e4ff54;
}

.nuda-in2-queuedepth__bars span.is-active {
  animation: _nuda-in2queuedepth-pulse 1.3s ease-in-out infinite;
}

.nuda-in2-queuedepth__count {
  font-weight: 700;
  color: #fafafa;
  font-variant-numeric: tabular-nums;
}

.nuda-in2-queuedepth__label {
  color: #777;
}

@keyframes _nuda-in2queuedepth-pulse {
  0%,100% {
    opacity: 1;
    transform: scaleY(1);
  }
  50% {
    opacity: .55;
    transform: scaleY(.7);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-in2-queuedepth__bars span.is-active {
    animation: none !important;
  }
}