Pulsar
Discrete quota unit consumption tallying up to a strict target allowance marker with usage lockmonthly-api-quota8/10 USEDLIMIT

Capacity Discrete Quota

CSS

Discrete quota usage units illuminate sequentially across an allowance board, locking onto a strict target limit marker.

Tier
CSS
Dependencies
None
Duration
8.2 s, loops
Categories
Data and progress
Use cases
Determinate progress, Dashboards and reporting
Industries
SaaS and software, IT services and infrastructure
Style
Data mark · regular stroke
Set
capacity
Tags
loopcounterdotsui

Companion assets

The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.

Animated
Discrete quota unit consumption tallying up to a strict target allowance marker with usage lockmonthly-api-quota8/10 USEDLIMIT
CSS tier
Static vector
Capacity Discrete Quota, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-quota-title" class="pulsar pulsar-capacity-quota" data-pulsar="capacity-quota" role="img" viewBox="0 0 160 96"><title id="capacity-quota-title">Discrete quota unit consumption tallying up to a strict target allowance marker with usage lock</title><g fill="currentColor" font-family="monospace"><text x="24" y="22" font-size="3.5" opacity=".4">monthly-api-quota</text><text id="capacity-quota-val" x="136" y="22" font-size="4.5" font-weight="700" opacity=".9" text-anchor="end">8/10 USED</text></g><g fill="none" stroke="currentColor" stroke-width=".6" opacity=".25"><rect width="112" height="24" x="24" y="36" rx="2"></rect></g><line id="capacity-quota-target" x1="113.6" x2="113.6" y1="30" y2="66" fill="none" stroke="currentColor" stroke-dasharray="2 2" stroke-width="1.2" opacity=".4"></line><text x="113.6" y="74" fill="currentColor" font-family="monospace" font-size="3.5" opacity=".4" text-anchor="middle">LIMIT</text><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".15"><rect width="8" height="16" x="28" y="40" rx="1"></rect><rect width="8" height="16" x="39" y="40" rx="1"></rect><rect width="8" height="16" x="50" y="40" rx="1"></rect><rect width="8" height="16" x="61" y="40" rx="1"></rect><rect width="8" height="16" x="72" y="40" rx="1"></rect><rect width="8" height="16" x="83" y="40" rx="1"></rect><rect width="8" height="16" x="94" y="40" rx="1"></rect><rect width="8" height="16" x="105" y="40" rx="1"></rect><rect width="8" height="16" x="116" y="40" rx="1"></rect><rect width="8" height="16" x="127" y="40" rx="1"></rect></g><rect id="capacity-quota-u1" width="8" height="16" x="28" y="40" fill="currentColor" opacity="0" rx="1"></rect><rect id="capacity-quota-u2" width="8" height="16" x="39" y="40" fill="currentColor" opacity="0" rx="1"></rect><rect id="capacity-quota-u3" width="8" height="16" x="50" y="40" fill="currentColor" opacity="0" rx="1"></rect><rect id="capacity-quota-u4" width="8" height="16" x="61" y="40" fill="currentColor" opacity="0" rx="1"></rect><rect id="capacity-quota-u5" width="8" height="16" x="72" y="40" fill="currentColor" opacity="0" rx="1"></rect><rect id="capacity-quota-u6" width="8" height="16" x="83" y="40" fill="currentColor" opacity="0" rx="1"></rect><rect id="capacity-quota-u7" width="8" height="16" x="94" y="40" fill="currentColor" opacity="0" rx="1"></rect><rect id="capacity-quota-u8" width="8" height="16" x="105" y="40" fill="currentColor" opacity="0" rx="1"></rect></svg>

animation.css

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

.pulsar-capacity-quota #capacity-quota-target {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-quota #capacity-quota-u1,
.pulsar-capacity-quota #capacity-quota-u2,
.pulsar-capacity-quota #capacity-quota-u3,
.pulsar-capacity-quota #capacity-quota-u4,
.pulsar-capacity-quota #capacity-quota-u5,
.pulsar-capacity-quota #capacity-quota-u6,
.pulsar-capacity-quota #capacity-quota-u7,
.pulsar-capacity-quota #capacity-quota-u8,
.pulsar-capacity-quota #capacity-quota-val {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-quota #capacity-quota-u1 {
  animation: capacity-quota-unit 6000ms 200ms ease-out infinite;
}
.pulsar-capacity-quota #capacity-quota-u2 {
  animation: capacity-quota-unit 6000ms 450ms ease-out infinite;
}
.pulsar-capacity-quota #capacity-quota-u3 {
  animation: capacity-quota-unit 6000ms 700ms ease-out infinite;
}
.pulsar-capacity-quota #capacity-quota-u4 {
  animation: capacity-quota-unit 6000ms 950ms ease-out infinite;
}
.pulsar-capacity-quota #capacity-quota-u5 {
  animation: capacity-quota-unit 6000ms 1200ms ease-out infinite;
}
.pulsar-capacity-quota #capacity-quota-u6 {
  animation: capacity-quota-unit 6000ms 1450ms ease-out infinite;
}
.pulsar-capacity-quota #capacity-quota-u7 {
  animation: capacity-quota-unit 6000ms 1700ms ease-out infinite;
}
.pulsar-capacity-quota #capacity-quota-u8 {
  animation: capacity-quota-unit 6000ms 1950ms ease-out infinite;
}

@keyframes capacity-quota-unit {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  12%,
  72% {
    opacity: 0.9;
    transform: scale(1);
  }
  88%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

.pulsar-capacity-quota #capacity-quota-target {
  animation: capacity-quota-lock 6000ms 2200ms ease-in-out infinite;
}

@keyframes capacity-quota-lock {
  0%,
  100% {
    opacity: 0.4;
    stroke-width: 1.2;
  }
  15%,
  55% {
    opacity: 1;
    stroke-width: 1.8;
  }
  75% {
    opacity: 0.4;
    stroke-width: 1.2;
  }
}

.pulsar-capacity-quota #capacity-quota-val {
  animation: capacity-quota-txt 6000ms ease-in-out infinite;
}

@keyframes capacity-quota-txt {
  0%,
  35% {
    opacity: 0.5;
  }
  50%,
  75% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-quota * {
    animation: none !important;
  }
  .pulsar-capacity-quota #capacity-quota-u1,
  .pulsar-capacity-quota #capacity-quota-u2,
  .pulsar-capacity-quota #capacity-quota-u3,
  .pulsar-capacity-quota #capacity-quota-u4,
  .pulsar-capacity-quota #capacity-quota-u5,
  .pulsar-capacity-quota #capacity-quota-u6,
  .pulsar-capacity-quota #capacity-quota-u7,
  .pulsar-capacity-quota #capacity-quota-u8 {
    opacity: 0.9;
    transform: scale(1);
  }
  .pulsar-capacity-quota #capacity-quota-target {
    opacity: 1;
    stroke-width: 1.6;
  }
}

From this family15 in Capacity

See the family