Feedback
Spinner
A waiting indicator for actions and loads.
Examples
Small · Medium · Large (role=status, with a name)
Anatomy
Spinner anatomy| # | Part | Description | Presence |
|---|
| 1 | Ring | Arc thickness = size ÷ 8 | Required |
|---|
| 2 | Label | Name for assistive tech | Required |
|---|
Specifications
| Sizes | Small · Medium · Large |
|---|
| Arc thickness | size ÷ 8 |
|---|
| Inner radius | 0.75 ratio |
|---|
Interaction
Keyboard| Key | Result |
|---|
| None | Not focusable |
|---|
Pointer and touch| Trigger | Response |
|---|
| Spin | 0.8s linear; reduced motion shows a static ring and text |
|---|
Accessibility
role · status
2.2.2Pause, Stop, Hide4.1.3Status Messages
Requirements| Requirement | How Rig meets it |
|---|
| Role | role="status" with an accessible name |
|---|
| Context | Say what is loading when more than one thing can |
|---|
| Buttons | Inside a button, keep the label and set aria-busy |
|---|
| Reduced motion | Replace the spin with a pulse or static arc |
|---|
Usage
Do and don’t| Do | Don’t |
|---|
| ✓Pair with text for loads over a few seconds | ✕Do not use as the only progress cue for long operations (use Progress bar) |