Orbit Spinner

<span class="ob" role="status" aria-label="Loading"></span>

.ob{position:relative;width:56px;height:56px;border-radius:50%;border:3px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.ob::before,.ob::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent;border-top-color:var(--accent);animation:ob 1s linear infinite}
.ob::after{inset:7px;border-top-color:transparent;border-bottom-color:var(--ink);animation-duration:1.4s;animation-direction:reverse}
@keyframes ob{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ob::before,.ob::after{animation-duration:3s}}

const css = `
.ob{position:relative;display:inline-block;width:var(--ob-size,56px);height:var(--ob-size,56px);border-radius:50%;border:3px solid rgba(127,127,127,.18)}
.ob::before,.ob::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid transparent;border-top-color:var(--ob-a,#5b8cff);animation:ob 1s linear infinite}
.ob::after{inset:7px;border-top-color:transparent;border-bottom-color:var(--ob-b,currentColor);animation-duration:1.4s;animation-direction:reverse}
@keyframes ob{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ob::before,.ob::after{animation-duration:3s}}`;

export function OrbitSpinner({ size = 56, accent = "#5b8cff", label = "Loading" }: { size?: number; accent?: string; label?: string }) {
  return (
    <>
      <style>{css}</style>
      <span className="ob" role="status" aria-label={label} style={{ ["--ob-size" as string]: `${size}px`, ["--ob-a" as string]: accent }} />
    </>
  );
}

export default OrbitSpinner;