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

Companion assets

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

Animated
Gauge arc
CSS tier
Static vector
Gauge Arc, not animated
Download SVG

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

From this family5 in Gauge

See the family