Capacity Linear Meter

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-meter-title" class="pulsar pulsar-capacity-meter" data-pulsar="capacity-meter" role="img" viewBox="0 0 160 96"><title id="capacity-meter-title">Linear horizontal slider capacity meter filling dynamically with a leading-edge ticker cursor</title><g fill="currentColor" font-family="monospace"><text x="24" y="24" font-size="4" opacity=".4">memory-pool/sys</text><text id="capacity-meter-txt" x="136" y="24" font-size="5" font-weight="700" opacity=".9" text-anchor="end">84%</text></g><rect width="112" height="12" x="24" y="42" fill="none" stroke="currentColor" stroke-width=".8" opacity=".25" rx="2"></rect><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".2"><line x1="52" x2="52" y1="42" y2="54"></line><line x1="80" x2="80" y1="42" y2="54"></line><line x1="108" x2="108" y1="42" y2="54"></line></g><g fill="none" stroke="currentColor" stroke-width=".6" opacity=".35"><line x1="24" x2="24" y1="58" y2="64"></line><line x1="52" x2="52" y1="58" y2="62"></line><line x1="80" x2="80" y1="58" y2="64"></line><line x1="108" x2="108" y1="58" y2="62"></line><line x1="136" x2="136" y1="58" y2="64"></line></g><g fill="currentColor" font-family="monospace" font-size="3.5" opacity=".35"><text x="24" y="72" text-anchor="middle">0</text><text x="80" y="72" text-anchor="middle">50%</text><text x="136" y="72" text-anchor="middle">MAX</text></g><rect id="capacity-meter-bar" width="94" height="10" x="25" y="43" fill="currentColor" opacity=".45" rx="1.5"></rect><g id="capacity-meter-cursor"><line x1="119" x2="119" y1="36" y2="60" fill="none" stroke="currentColor" stroke-width="1.2"></line><circle cx="119" cy="48" r="2.5" fill="currentColor"></circle></g></svg>

.pulsar-capacity-meter {
  --pulsar-accent: currentColor;
}

.pulsar-capacity-meter #capacity-meter-cursor line {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-meter #capacity-meter-bar,
.pulsar-capacity-meter #capacity-meter-cursor circle,
.pulsar-capacity-meter #capacity-meter-txt {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-meter #capacity-meter-bar {
  animation: capacity-meter-fill 5600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes capacity-meter-fill {
  0%,
  10% {
    width: 0;
    opacity: 0.2;
  }
  50%,
  78% {
    width: 94px;
    opacity: 0.55;
  }
  92%,
  100% {
    width: 0;
    opacity: 0.2;
  }
}

.pulsar-capacity-meter #capacity-meter-cursor {
  animation: capacity-meter-cursor-slide 5600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes capacity-meter-cursor-slide {
  0%,
  10% {
    transform: translateX(-94px);
    opacity: 0.3;
  }
  50%,
  78% {
    transform: translateX(0);
    opacity: 1;
  }
  92%,
  100% {
    transform: translateX(-94px);
    opacity: 0.3;
  }
}

.pulsar-capacity-meter #capacity-meter-txt {
  animation: capacity-meter-pulse-txt 5600ms ease-in-out infinite;
}

@keyframes capacity-meter-pulse-txt {
  0%,
  10% {
    opacity: 0.4;
  }
  50%,
  78% {
    opacity: 1;
  }
  92%,
  100% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-meter * {
    animation: none !important;
  }
  .pulsar-capacity-meter #capacity-meter-bar {
    width: 94px;
    opacity: 0.55;
  }
  .pulsar-capacity-meter #capacity-meter-cursor {
    transform: translateX(0);
    opacity: 1;
  }
}