The Spinner provides visual feedback during loading states. It’s a lightweight SVG-based loading indicator with continuous rotation animation.
| Property | Value |
|---|
| Selector | lib-spinner |
| Default Size | 1.25rem × 1.25rem (20px) |
| Animation | 1s linear infinite rotation |
| Default Color | White (#fff) |
- During data fetching operations (200ms or longer)
- While processing form submissions
- When loading content asynchronously
- To prevent user interaction during operations
- When immediate feedback is needed for user actions
- For quick operations (< 200ms) — avoid visual flash
- When multiple spinners would be stacked — use one centralized indicator
- As the only indicator for critical, blocking operations — add explanatory text
- In situations where a skeleton screen would provide better UX
| Do | Don’t |
|---|
| Use with descriptive text for accessibility | Rely on spinner alone without context |
| Ensure visibility against background | Use on backgrounds with similar contrast |
| Use consistently across similar operations | Mix different loading indicators |
| Center within the loading container | Place awkwardly without proper spacing |
| Show only after minimum delay (200ms) | Flash briefly for instant operations |
- Always provide alternative text or context when using the spinner
- Consider adding
aria-live="polite" and aria-busy="true" to loading containers
- Pair with descriptive text: “Loading…”, “Please wait…”, or specific action context
- Ensure sufficient color contrast between spinner and background