General
Loading Spinner
An animated spinner indicating loading or processing state.
Overview
The Loading Spinner component shows an accessible loading indicator so users know that content or an action is in progress. It supports different sizes and can be used for buttons, cards, or full-page loading states.
Key Business & UX Benefits
- Reduces uncertainty by showing that the system is working.
- Keeps interactions accessible with proper labels and semantics.
- Fits different contexts with configurable sizes.
- Matches common patterns so users recognize loading at a glance.
Pro-Tip from Larry: Use the right size for the context so the spinner is visible but not distracting.
Usage
Primary
Loading Spinner Primary
<LoadingSpinner />
Primary
Loading Spinner Primary
<LoadingSpinner />
Feature List
- Different sizes for buttons, cards, or full-page use
- Accessible with proper ARIA and label support
- Optional required and non-required flags for forms
- Theme-aligned styling for light and dark modes
API Reference
| Prop | Default | Type |
|---|---|---|
size | large | "small" | "large" |
variant | secondary | ButtonVariant ("primary" | "secondary" | 13 more) |
type | row | "row" | "round" |