Ring Spinner

<!-- Ring Spinner -->
<div class="nuda-ring-spinner" role="status" aria-label="Loading">
  <div class="nuda-ring-spinner__outer"></div>
  <div class="nuda-ring-spinner__inner"></div>
</div>

/* Ring Spinner
   Double ring counter-rotating spinner.
   Customize: --ring-outer-color, --ring-inner-color, --ring-size */

.nuda-ring-spinner {
  --ring-outer-color: #818cf8;
  --ring-inner-color: #f472b6;
  --ring-size: 40px;
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
}

.nuda-ring-spinner__outer {
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-top-color: var(--ring-outer-color);
  border-bottom-color: var(--ring-outer-color);
  border-radius: 50%;
  animation: nuda-ring-spin 1.2s linear infinite;
  will-change: transform;
}

.nuda-ring-spinner__inner {
  position: absolute;
  inset: 6px;
  border: 3px solid transparent;
  border-left-color: var(--ring-inner-color);
  border-right-color: var(--ring-inner-color);
  border-radius: 50%;
  animation: nuda-ring-spin 1.2s linear infinite reverse;
  will-change: transform;
}

@keyframes nuda-ring-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-ring-spinner__outer,
  .nuda-ring-spinner__inner {
    animation: none;
    opacity: 0.6;
  }
}