Spinner
Indeterminate loading indicator. Wrap children — shown when loading is false.
Install
Import path
Examples
Badge
Add a spinner to a badge to indicate a loading state. Place the <Spinner /> before the label with data-icon='inline-start' for a start position, or after the label with data-icon='inline-end' for an end position.
Customization
Replace the default spinner icon with any other icon.
Empty
An indicator that can be used to show a loading state.
Please wait while we process your request. Do not refresh the page.
Input Group
An indicator that can be used to show a loading state.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Size
Use the size-* utility class to change the size of the spinner.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Spinner } from "@codefast/ui/spinner";
<Spinner className="size-5" />
// with an accessible label
<Spinner>Loading…</Spinner>
API reference
Props for each part of the component. All native element props are also forwarded.
Spinner
An indeterminate loading indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
| loading | boolean | true | When false, renders children instead of the spinner. |
| children | ReactNode | — | Used as a visually-hidden label while spinning. |
| className | string | — | Set the size (e.g. size-5) and colour. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Give the spinner a label via children so its purpose is announced.
- Prefer a Spinner over a fake progress bar when you don’t know the duration.
- Respect reduced motion — the animation is paused under prefers-reduced-motion.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for short, indeterminate waits.
- Pair with disabled controls while an action is in flight.
Don’t
- Don’t use a spinner for long, measurable tasks — use Progress.
- Don’t show a bare spinner with no context about what’s loading.