Pulsar
Gauge segments

Gauge Segments

CSS

A ring of ten separated segments lights up one segment at a time clockwise until seven are lit, then steps back down.

Tier
CSS
Dependencies
None
Duration
3 s, loops
Categories
Data and progress
Use cases
Determinate progress, Dashboards and reporting
Industries
SaaS and software, Logistics and supply chain
Style
Data mark · regular stroke
Set
gauge
Tags
ringstaggerstrokeloopprogress

Companion assets

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

Animated
Gauge segments
CSS tier
Static vector
Gauge Segments, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="gauge-segments-title" class="pulsar pulsar-gauge-segments" data-pulsar="gauge-segments" role="img" viewBox="0 0 96 96"><title id="gauge-segments-title">Gauge segments</title><mask id="gauge-segments-mask"><circle cx="48" cy="48" r="36" fill="none" stroke="#fff" stroke-dasharray="17.62 5" stroke-width="8" transform="rotate(-90 48 48)"></circle></mask><circle id="gauge-segments-track" cx="48" cy="48" r="36" fill="none" stroke="currentColor" stroke-width="6" mask="url(#gauge-segments-mask)" opacity=".2"></circle><circle id="gauge-segments-progress" cx="48" cy="48" r="36" fill="none" stroke="currentColor" stroke-dasharray="226.19" stroke-dashoffset="70.4" stroke-linecap="butt" stroke-width="6" mask="url(#gauge-segments-mask)"></circle></svg>

animation.css

.pulsar-gauge-segments #gauge-segments-track {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  opacity: 0.2;
}

.pulsar-gauge-segments #gauge-segments-progress {
  fill: none;
  stroke: var(--pulsar-accent, currentColor);
  stroke-width: 6;
  stroke-linecap: butt;
  stroke-dasharray: 226.19;
  stroke-dashoffset: 70.4;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-90deg);
  animation: gauge-segments-step 3000ms linear infinite;
}

@keyframes gauge-segments-step {
  0% {
    stroke-dashoffset: 70.4;
  }
  15% {
    stroke-dashoffset: 70.4;
    animation-timing-function: steps(7, jump-start);
  }
  30% {
    stroke-dashoffset: 226.19;
  }
  35% {
    stroke-dashoffset: 226.19;
    animation-timing-function: steps(7, jump-end);
  }
  85% {
    stroke-dashoffset: 70.4;
  }
  100% {
    stroke-dashoffset: 70.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-gauge-segments #gauge-segments-progress {
    animation: none;
    stroke-dashoffset: 70.4;
  }
}

From this family5 in Gauge

See the family