Spinner
Small rotating ring for an inline or button-embedded loading indicator.
Preview
Standalone
<span class="nx-spinner" role="img" aria-label="Loading"></span><span className="nx-spinner" role="img" aria-label="Loading" />API
Classes
| Class | Description |
|---|---|
.nx-spinner | 18×18 ring, currentColor border-top, spin animation |
Accessibility
- Always carries role="img" + aria-label (or is purely decorative alongside visible "Saving…" text) — a bare spinning ring has no accessible name on its own.
- Respects prefers-reduced-motion (animation removed, ring stays static).
Do / Don’t
- Do: Pair with an aria-label or adjacent visible loading text.Don’t: Don't use it as the only indicator inside a button without also setting aria-busy on the button.