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
Themeable
Yes. Inherits currentColor and reads --pulsar-accent.
Version
1.0.0, added 2026-09-09
Licence
To be confirmed. See the repository LICENSE.

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;
  }
}