Pulsar
Horizontal vernier capacity gauge with graduated scale ticks and a dynamic telemetry fill indexvolume/data-074%050%100allocated: 1.48 TB / 2.00 TB

Capacity Vernier Gauge

CSS

A horizontal vernier telemetry gauge sliding an analog caliper needle along a graduated capacity track to meter system resource usage.

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

Companion assets

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

Animated
Horizontal vernier capacity gauge with graduated scale ticks and a dynamic telemetry fill indexvolume/data-074%050%100allocated: 1.48 TB / 2.00 TB
CSS tier
Static vector
Capacity Vernier Gauge, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-gauge-title" class="pulsar pulsar-capacity-gauge" data-pulsar="capacity-gauge" role="img" viewBox="0 0 160 96"><title id="capacity-gauge-title">Horizontal vernier capacity gauge with graduated scale ticks and a dynamic telemetry fill index</title><g fill="currentColor" font-family="monospace"><text x="24" y="20" font-size="4" opacity=".4">volume/data-0</text><text id="capacity-gauge-val" x="136" y="20" font-size="5" font-weight="700" opacity=".9" text-anchor="end">74%</text></g><g fill="none" stroke="currentColor" stroke-width=".6" opacity=".25"><line x1="24" x2="136" y1="48" y2="48"></line><rect width="112" height="12" x="24" y="42" rx="1.5"></rect></g><g fill="none" stroke="currentColor" stroke-width=".6" opacity=".35"><line x1="24" x2="24" y1="36" y2="42"></line><line x1="52" x2="52" y1="38" y2="42"></line><line x1="80" x2="80" y1="36" y2="42"></line><line x1="108" x2="108" y1="38" y2="42"></line><line x1="136" x2="136" y1="36" y2="42"></line><line x1="24" x2="24" y1="54" y2="60"></line><line x1="80" x2="80" y1="54" y2="60"></line><line x1="136" x2="136" y1="54" y2="60"></line></g><g fill="currentColor" font-family="monospace" font-size="3.5" opacity=".35"><text x="24" y="68" text-anchor="middle">0</text><text x="80" y="68" text-anchor="middle">50%</text><text x="136" y="68" text-anchor="middle">100</text></g><rect id="capacity-gauge-fill" width="78" height="10" x="25" y="43" fill="currentColor" opacity=".4" rx="1"></rect><g id="capacity-gauge-cursor"><line id="capacity-gauge-needle" x1="103" x2="103" y1="34" y2="62" fill="none" stroke="currentColor" stroke-width="1.4"></line><polygon id="capacity-gauge-pip-top" fill="currentColor" points="103,42 100,36 106,36"></polygon><polygon id="capacity-gauge-pip-bot" fill="currentColor" points="103,54 100,60 106,60"></polygon></g><text x="24" y="82" fill="currentColor" font-family="monospace" font-size="3.5" opacity=".35">allocated: 1.48 TB / 2.00 TB</text></svg>

animation.css

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

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

.pulsar-capacity-gauge #capacity-gauge-fill,
.pulsar-capacity-gauge #capacity-gauge-pip-top,
.pulsar-capacity-gauge #capacity-gauge-pip-bot,
.pulsar-capacity-gauge #capacity-gauge-val {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-gauge #capacity-gauge-fill {
  animation: capacity-gauge-sweep 6000ms cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes capacity-gauge-sweep {
  0% {
    width: 60px;
    opacity: 0.35;
  }
  45% {
    width: 94px;
    opacity: 0.6;
  }
  75% {
    width: 78px;
    opacity: 0.45;
  }
  100% {
    width: 60px;
    opacity: 0.35;
  }
}

.pulsar-capacity-gauge #capacity-gauge-cursor {
  animation: capacity-gauge-slide 6000ms cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

@keyframes capacity-gauge-slide {
  0% {
    transform: translateX(-18px);
  }
  45% {
    transform: translateX(16px);
  }
  75% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-18px);
  }
}

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

@keyframes capacity-gauge-val-pulse {
  0%,
  100% {
    opacity: 0.7;
  }
  45% {
    opacity: 1;
  }
  75% {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-gauge * {
    animation: none !important;
  }
  .pulsar-capacity-gauge #capacity-gauge-fill {
    width: 78px;
    opacity: 0.5;
  }
  .pulsar-capacity-gauge #capacity-gauge-cursor {
    transform: translateX(0);
  }
}

From this family15 in Capacity

See the family