Pulsar
Audit Ring: Concentric rings aligning their gaps to form a clear path.

Audit Ring

CSS

Concentric rings aligning their gaps to form a clear path.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Security and trust
Industries
Finance and fintech, Cross-industry
Style
Minimal line · light stroke
Set
reconcile
Tags
loopringrotate

Companion assets

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

Animated
Audit Ring: Concentric rings aligning their gaps to form a clear path.
CSS tier
Static vector
Audit Ring, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="reconcile-audit-title" class="pulsar pulsar-reconcile-audit" data-pulsar="reconcile-audit" role="img" viewBox="0 0 120 40"><title id="reconcile-audit-title">Audit Ring: Concentric rings aligning their gaps to form a clear path.</title><circle id="reconcile-audit-outer" cx="60" cy="20" r="18" fill="none" stroke="currentColor" stroke-dasharray="84.823 28.274" stroke-linecap="round" stroke-width="2" transform="rotate(-45 60 20)"></circle><circle id="reconcile-audit-inner" cx="60" cy="20" r="12" fill="none" stroke="currentColor" stroke-dasharray="56.549 18.850" stroke-linecap="round" stroke-width="2" transform="rotate(-45 60 20)"></circle></svg>

animation.css

/* Accent: the inner ring, so the two gaps reaching alignment read apart. */
.pulsar-reconcile-audit #reconcile-audit-inner {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-reconcile-audit #reconcile-audit-outer,
.pulsar-reconcile-audit #reconcile-audit-inner {
  transform-box: view-box;
  transform-origin: 60px 20px;
}

.pulsar-reconcile-audit #reconcile-audit-outer {
  animation: reconcile-audit-outer-rotate 4000ms infinite linear;
}

.pulsar-reconcile-audit #reconcile-audit-inner {
  animation: reconcile-audit-inner-rotate 4000ms infinite linear;
}

@keyframes reconcile-audit-outer-rotate {
  0% {
    transform: rotate(-15deg);
    animation-timing-function: linear;
  }
  70% {
    transform: rotate(285deg);
    animation-timing-function: ease-out;
  }
  85% {
    transform: rotate(315deg);
    animation-timing-function: step-end;
  }
  92.5% {
    transform: rotate(315deg);
    animation-timing-function: ease-in;
  }
  100% {
    transform: rotate(345deg);
  }
}

@keyframes reconcile-audit-inner-rotate {
  0% {
    transform: rotate(-45deg);
    animation-timing-function: linear;
  }
  70% {
    transform: rotate(-375deg);
    animation-timing-function: ease-out;
  }
  85% {
    transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-reconcile-audit #reconcile-audit-outer,
  .pulsar-reconcile-audit #reconcile-audit-inner {
    animation: none;
    transform: rotate(-45deg);
  }
}

From this family15 in Reconcile

See the family