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

Companion assets

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

Animated
Gauge ring
CSS tier
Static vector
Gauge Ring, not animated
Download SVG

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

From this family5 in Gauge

See the family