Arc Spinner

<!-- Arc Spinner -->
<div class="nuda-arc-spinner" role="status" aria-label="Loading">
  <svg viewBox="0 0 50 50" width="40" height="40">
    <circle class="nuda-arc-spinner__a" cx="25" cy="25" r="20"
      fill="none" stroke-width="3" stroke-linecap="round" />
    <circle class="nuda-arc-spinner__b" cx="25" cy="25" r="13"
      fill="none" stroke-width="3" stroke-linecap="round" />
  </svg>
</div>

/* Arc Spinner
   Two SVG arcs chasing each other in opposite directions.
   Customize: --arc-color-a, --arc-color-b */

.nuda-arc-spinner {
  --arc-color-a: #818cf8;
  --arc-color-b: #f472b6;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-arc-spinner svg {
  animation: nuda-arc-outer 1.4s linear infinite;
  will-change: transform;
}

.nuda-arc-spinner__a {
  stroke: var(--arc-color-a);
  stroke-dasharray: 60 66;
}

.nuda-arc-spinner__b {
  stroke: var(--arc-color-b);
  stroke-dasharray: 40 42;
  transform-origin: center;
  animation: nuda-arc-inner 1.4s linear infinite reverse;
  will-change: transform;
}

@keyframes nuda-arc-outer {
  to { transform: rotate(360deg); }
}

@keyframes nuda-arc-inner {
  to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-arc-spinner svg,
  .nuda-arc-spinner__b {
    animation: none;
    opacity: 0.6;
  }
}