Pulsar
Illuminated capacity bar steadily draining from right to left into a critical exhaustion state and triggering low-resource alertresource-pool/entropySTABLE 100%0CRIT50%100

Capacity Resource Exhaustion

CSS

A fully illuminated system resource reservoir bar steadily drains into a critical exhaustion zone, triggering low-capacity telemetry warnings.

Tier
CSS
Dependencies
None
Duration
6 s, loops
Categories
Data and progress
Use cases
Errors and warnings, Dashboards and reporting
Industries
IT services and infrastructure, Cross-industry
Style
Data mark · regular stroke
Set
capacity
Tags
loopbarsprogressui

Companion assets

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

Animated
Illuminated capacity bar steadily draining from right to left into a critical exhaustion state and triggering low-resource alertresource-pool/entropySTABLE 100%0CRIT50%100
CSS tier
Static vector
Capacity Resource Exhaustion, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-exhaust-title" class="pulsar pulsar-capacity-exhaust" data-pulsar="capacity-exhaust" role="img" viewBox="0 0 160 96"><title id="capacity-exhaust-title">Illuminated capacity bar steadily draining from right to left into a critical exhaustion state and triggering low-resource alert</title><g fill="currentColor" font-family="monospace"><text x="24" y="22" font-size="3.5" opacity=".4">resource-pool/entropy</text><text id="capacity-exhaust-status" x="136" y="22" font-size="4" font-weight="700" opacity=".9" text-anchor="end">STABLE 100%</text></g><rect width="112" height="14" x="24" y="38" fill="none" stroke="currentColor" stroke-width=".8" opacity=".25" rx="2"></rect><line id="capacity-exhaust-crit-line" x1="46.4" x2="46.4" y1="34" y2="56" fill="none" stroke="currentColor" stroke-dasharray="2 2" stroke-width="1" opacity=".35"></line><g fill="none" stroke="currentColor" stroke-width=".6" opacity=".35"><line x1="24" x2="24" y1="56" y2="62"></line><line x1="46.4" x2="46.4" y1="56" y2="62"></line><line x1="80" x2="80" y1="56" y2="60"></line><line x1="136" x2="136" y1="56" y2="62"></line></g><g fill="currentColor" font-family="monospace" font-size="3.5" opacity=".35"><text x="24" y="70" text-anchor="middle">0</text><text id="capacity-exhaust-crit-lbl" x="46.4" y="70" text-anchor="middle">CRIT</text><text x="80" y="70" text-anchor="middle">50%</text><text x="136" y="70" text-anchor="middle">100</text></g><rect id="capacity-exhaust-bar" width="110" height="12" x="25" y="39" fill="currentColor" opacity=".5" rx="1.5"></rect></svg>

animation.css

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

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

.pulsar-capacity-exhaust #capacity-exhaust-bar,
.pulsar-capacity-exhaust #capacity-exhaust-crit-lbl,
.pulsar-capacity-exhaust #capacity-exhaust-status {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-exhaust #capacity-exhaust-bar {
  animation: capacity-exhaust-drain 6000ms cubic-bezier(0.2, 0.9, 0.3, 1) infinite;
}

@keyframes capacity-exhaust-drain {
  0%,
  15% {
    width: 110px;
    opacity: 0.45;
  }
  55% {
    width: 14px;
    opacity: 0.9;
  }
  65%,
  78% {
    width: 14px;
    opacity: 1;
  }
  88%,
  100% {
    width: 110px;
    opacity: 0.45;
  }
}

.pulsar-capacity-exhaust #capacity-exhaust-crit-line {
  animation: capacity-exhaust-crit-flash 6000ms ease-in-out infinite;
}

@keyframes capacity-exhaust-crit-flash {
  0%,
  48% {
    opacity: 0.35;
    stroke-width: 1;
  }
  55%,
  78% {
    opacity: 1;
    stroke-width: 1.8;
  }
  88%,
  100% {
    opacity: 0.35;
    stroke-width: 1;
  }
}

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

@keyframes capacity-exhaust-txt {
  0%,
  48% {
    opacity: 0.6;
  }
  55%,
  78% {
    opacity: 1;
  }
  88%,
  100% {
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-exhaust * {
    animation: none !important;
  }
  .pulsar-capacity-exhaust #capacity-exhaust-bar {
    width: 14px;
    opacity: 0.9;
  }
  .pulsar-capacity-exhaust #capacity-exhaust-crit-line {
    opacity: 1;
    stroke-width: 1.6;
  }
  .pulsar-capacity-exhaust #capacity-exhaust-status {
    opacity: 1;
  }
}

From this family15 in Capacity

See the family