Triple Ring

<!-- Triple Ring Spinner -->
<div class="nuda-triple-ring" role="status" aria-label="Loading">
  <span></span>
  <span></span>
  <span></span>
</div>

/* Triple Ring Spinner
   Three concentric rings spinning at different speeds and directions.
   Customize: --tri-color-a, --tri-color-b, --tri-color-c, --tri-size */

.nuda-triple-ring {
  --tri-color-a: #818cf8;
  --tri-color-b: #f472b6;
  --tri-color-c: #34d399;
  --tri-size: 44px;
  position: relative;
  width: var(--tri-size);
  height: var(--tri-size);
}

.nuda-triple-ring span {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
  will-change: transform;
}

.nuda-triple-ring span:nth-child(1) {
  inset: 0;
  border-top-color: var(--tri-color-a);
  animation: nuda-triple-ring 1s linear infinite;
}

.nuda-triple-ring span:nth-child(2) {
  inset: 5px;
  border-right-color: var(--tri-color-b);
  animation: nuda-triple-ring 1.5s linear infinite reverse;
}

.nuda-triple-ring span:nth-child(3) {
  inset: 10px;
  border-bottom-color: var(--tri-color-c);
  animation: nuda-triple-ring 2s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .nuda-triple-ring span {
    animation: none;
    opacity: 0.5;
  }
}