Feedback
Spinner
Spinner component is a visual indicator used to represent loading, processing or system activity.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features8 checks
- role="status" attribute for announcing loading states to screen readers
- aria-label for descriptive loading messages (WCAG 4.1.2)
- aria-live="polite" for non-intrusive updates to screen readers
- Color is not the only visual indicator (animation provides additional feedback)
- Sufficient color contrast for visibility (meets WCAG 1.4.3)
- No reliance on motion alone - text labels available for additional context
- Respects prefers-reduced-motion user preferences
- Label text announced to screen readers for context
When to use this component
✓Do's
- •Brief loading states (under 3 seconds)
- •Inline loading indicators in buttons or cards
- •Initial page or component loading
- •API call waiting states
✗Don'ts
- •For long-running tasks with measurable progress, use a progress indicator.
- •For loading content placeholders, use a skeleton.
- •For background tasks that don't require user attention, avoid using a loading indicator.
- •For operations that take longer than 10 seconds, provide a status update.
Do's and Don'ts
✓ Do's
Loading status...
Use spinners for brief loading states under 3 seconds.
✗ Don'ts
Don't use spinners for long operations, add a message or use Progress bar.