Pulsar
Gauge arc

Gauge Arc

CSS

A speedometer-style 270-degree dial fills clockwise while a needle swings from empty to a seventy-percent reading.

Tier
CSS
Dependencies
None
Duration
3 s, loops
Categories
Data and progress
Use cases
Determinate progress, Dashboards and reporting
Industries
SaaS and software, Finance and fintech
Style
Data mark · regular stroke
Set
gauge
Tags
ringrotatestrokeloopprogress
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-arc-title" class="pulsar pulsar-gauge-arc" data-pulsar="gauge-arc" role="img" viewBox="0 0 96 96"><title id="gauge-arc-title">Gauge arc</title><path id="gauge-arc-track" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="6" d="M22.54 73.46a36 36 0 1 1 50.92 0" opacity=".2"></path><path id="gauge-arc-progress" fill="none" stroke="currentColor" stroke-dasharray="169.65" stroke-dashoffset="50.9" stroke-linecap="round" stroke-width="6" d="M22.54 73.46a36 36 0 1 1 50.92 0"></path><line id="gauge-arc-needle" x1="48" x2="48" y1="48" y2="22" stroke="currentColor" stroke-linecap="round" stroke-width="4"></line><circle id="gauge-arc-pivot" cx="48" cy="48" r="5" fill="currentColor"></circle></svg>

animation.css

.pulsar-gauge-arc #gauge-arc-track {
  stroke: currentColor;
  opacity: 0.2;
}

.pulsar-gauge-arc #gauge-arc-progress {
  stroke: var(--pulsar-accent, currentColor);
  stroke-dasharray: 169.65;
  stroke-dashoffset: 50.9;
  animation: gauge-arc-fill 3000ms linear infinite;
}

.pulsar-gauge-arc #gauge-arc-needle {
  stroke: currentColor;
  transform-box: view-box;
  transform-origin: 48px 48px;
  transform: rotate(54deg);
  animation: gauge-arc-swing 3000ms linear infinite;
}

.pulsar-gauge-arc #gauge-arc-pivot {
  fill: currentColor;
}

@keyframes gauge-arc-fill {
  0% {
    stroke-dashoffset: 50.9;
  }
  15% {
    stroke-dashoffset: 50.9;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  30% {
    stroke-dashoffset: 169.65;
  }
  35% {
    stroke-dashoffset: 169.65;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  85% {
    stroke-dashoffset: 50.9;
  }
  100% {
    stroke-dashoffset: 50.9;
  }
}

@keyframes gauge-arc-swing {
  0% {
    transform: rotate(54deg);
  }
  15% {
    transform: rotate(54deg);
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  30% {
    transform: rotate(-135deg);
  }
  35% {
    transform: rotate(-135deg);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  85% {
    transform: rotate(54deg);
  }
  100% {
    transform: rotate(54deg);
  }
}

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

  .pulsar-gauge-arc #gauge-arc-needle {
    animation: none;
    transform: rotate(54deg);
  }
}