Infinity Loop

<!-- Infinity Loop Loader -->
<div class="nuda-infinity-loop" role="status" aria-label="Loading">
  <svg viewBox="0 0 100 50" width="64" height="32">
    <path
      class="nuda-infinity-loop__path"
      d="M25,25 C25,10 0,10 0,25 C0,40 25,40 25,25 C25,10 50,10 50,25 C50,40 25,40 25,25"
      fill="none"
      stroke-width="3"
      transform="translate(25, 0)"
    />
  </svg>
</div>

/* Infinity Loop Loader
   A figure-8 / infinity path animation using SVG stroke-dashoffset.
   Customize: --infinity-color, --infinity-stroke */

.nuda-infinity-loop {
  --infinity-color: #a78bfa;
  --infinity-stroke: 3;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-infinity-loop__path {
  stroke: var(--infinity-color);
  stroke-dasharray: 120;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-width: var(--infinity-stroke);
  animation: nuda-infinity-loop 2s linear infinite;
}

@keyframes nuda-infinity-loop {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -240; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-infinity-loop__path {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.6;
  }
}