Pulsar
Gauge ring

Gauge Ring

CSS

A circular progress ring sweeps clockwise from the top to a three-quarter reading, holds, drains back and sweeps again.

Tier
CSS
Dependencies
None
Duration
3 s, loops
Categories
Data and progress
Use cases
Loading and waiting, Determinate progress
Industries
SaaS and software, Finance and fintech
Style
Data mark · regular stroke
Set
gauge
Tags
ringcirclestrokeloopprogress
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-ring-title" class="pulsar pulsar-gauge-ring" data-pulsar="gauge-ring" role="img" viewBox="0 0 96 96"><title id="gauge-ring-title">Gauge ring</title><circle id="gauge-ring-track" cx="48" cy="48" r="36" fill="none" stroke="currentColor" stroke-width="6" opacity=".2"></circle><circle id="gauge-ring-progress" cx="48" cy="48" r="36" fill="none" stroke="currentColor" stroke-dasharray="226.19" stroke-dashoffset="56.55" stroke-linecap="round" stroke-width="6"></circle></svg>

animation.css

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

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

@keyframes gauge-ring-sweep {
  0% {
    stroke-dashoffset: 56.55;
  }
  15% {
    stroke-dashoffset: 56.55;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  30% {
    stroke-dashoffset: 226.19;
  }
  35% {
    stroke-dashoffset: 226.19;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  85% {
    stroke-dashoffset: 56.55;
  }
  100% {
    stroke-dashoffset: 56.55;
  }
}

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