Spinner
DraftA circular loading indicator for indeterminate async operations, rendered as a rotating partial ring.
- Usage
- Specs
- Content
- Status & changelog
- Code
Common alternative names
Loader, Loading indicator, Activity indicator
Usage guidelines coming soon.
Specs coming soon.
Content guidelines coming soon.
Status & changelog coming soon.
Usage
import { Spinner } from '@arch-ui/components';
function Example() {
return <Spinner />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Diameter of the spinner. xs = 16px, sm = 20px, md = 32px, lg = 48px. |
aria-label | string | 'Loading' | Accessible label announced by screen readers. |
labels | Partial<SpinnerLabels> | undefined | Override default labels for internationalisation. |
className | string | undefined | Additional CSS class names applied to the root element. |
All standard span HTML attributes are also supported via rest props.
Sizes
Choose a size that fits the context. Use xs or sm inline with text or inside buttons, and md or lg for standalone loading states.
<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
Custom label
Override the default "Loading" label to describe the specific operation. This is announced by screen readers.
<Spinner aria-label="Saving changes" />
<Spinner aria-label="Fetching results" size="lg" />
Internationalisation
Use the labels prop to override the default loading text for non-English locales. The labels object accepts a loading key.
<Spinner labels={{ loading: 'Cargando' }} />
When both aria-label and labels.loading are provided, aria-label takes precedence.
Inline usage
Spinner works well inside buttons or alongside text to indicate an in-progress action.
<Button disabled>
<Spinner size="xs" aria-label="Submitting" />
Submitting...
</Button>
Accessibility
- Spinner uses
role="status"which creates a live region. Screen readers will announce thearia-labelwhen the Spinner appears in the DOM. - Always provide a meaningful
aria-labelthat describes the operation in progress. - When
prefers-reduced-motion: reduceis active, the rotation animation stops. The partial ring remains visible as a static indicator.