Audit Ring

CSS

Concentric circular tracks rotate in opposite directions, aligning their gap segments to form a single continuous radial path.

Tier: CSS
Dependencies: None
Duration: 4.5 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: loopminimalui

Companion assets

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

Animated

CSS tier

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 circular tracks aligning gaps with a radial line</title><circle id="reconcile-audit-inner" cx="60" cy="20" r="8" fill="none" stroke="currentColor" stroke-dasharray="41.888 8.377" stroke-dashoffset="-4.189" stroke-width="2" transform="rotate(-90 60 20)"></circle><circle id="reconcile-audit-outer" cx="60" cy="20" r="15" fill="none" stroke="currentColor" stroke-dasharray="78.54 15.708" stroke-dashoffset="-7.854" stroke-width="2" transform="rotate(-90 60 20)"></circle><line id="reconcile-audit-radial" x1="60" x2="60" y1="20" y2="5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></line></svg>

animation.css

.pulsar-reconcile-audit #reconcile-audit-inner {
  transform-box: fill-box;
  transform-origin: center;
  animation: reconcile-audit-inner-main 4500ms linear infinite;
}

.pulsar-reconcile-audit #reconcile-audit-outer {
  transform-box: fill-box;
  transform-origin: center;
  animation: reconcile-audit-outer-main 4500ms linear infinite;
}

.pulsar-reconcile-audit #reconcile-audit-radial {
  animation: reconcile-audit-radial-main 4500ms linear infinite;
  stroke-dasharray: 15;
  stroke-dashoffset: 15;
}

@keyframes reconcile-audit-inner-main {
  0% {
    transform: rotate(-90deg);
    opacity: 1;
    animation-timing-function: linear;
  }
  40% {
    transform: rotate(270deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  70% {
    transform: rotate(270deg);
    opacity: 1;
    animation-timing-function: linear;
  }
  85% {
    transform: rotate(270deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95% {
    transform: rotate(270deg);
    opacity: 0;
  }
  100% {
    transform: rotate(270deg);
    opacity: 0;
  }
}

@keyframes reconcile-audit-outer-main {
  0% {
    transform: rotate(-90deg);
    opacity: 1;
    animation-timing-function: linear;
  }
  40% {
    transform: rotate(-450deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  70% {
    transform: rotate(-450deg);
    opacity: 1;
    animation-timing-function: linear;
  }
  85% {
    transform: rotate(-450deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95% {
    transform: rotate(-450deg);
    opacity: 0;
  }
  100% {
    transform: rotate(-450deg);
    opacity: 0;
  }
}

@keyframes reconcile-audit-radial-main {
  0% {
    stroke-dashoffset: 15;
    opacity: 1;
  }
  70% {
    stroke-dashoffset: 15;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  95% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-reconcile-audit #reconcile-audit-inner,
  .pulsar-reconcile-audit #reconcile-audit-outer,
  .pulsar-reconcile-audit #reconcile-audit-radial {
    animation: none;
  }
  .pulsar-reconcile-audit #reconcile-audit-inner {
    transform: rotate(-90deg);
    opacity: 1;
  }
  .pulsar-reconcile-audit #reconcile-audit-outer {
    transform: rotate(-90deg);
    opacity: 1;
  }
  .pulsar-reconcile-audit #reconcile-audit-radial {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}