Spinner
A lightweight, CSS-only loading indicator for indeterminate progress. Built as a Bootstrap border spinner — a rotating ring — with contextual colors and a compact size.
Import
import { Spinner } from '@metatoy/bootstrap-styled';Colors
With no variant, the spinner inherits the current text color (currentColor), so it
adopts whatever color its container sets. Pass variant for one of the eight contextual
colors, rendered from the library’s real Bootstrap palette.
Sizes & buttons
The default ring is 2rem; size="sm" renders a 1rem ring for tight spots such as
inside a button. A spinner sits naturally next to button text to signal a pending action.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | — | — |
| size | 'sm' | — | — |
| as | React.ElementType | — | — |
Spinner renders a <div> and forwards all native attributes; role="status" is
applied by default. Use as to render a different element (for example as="span" for
an inline spinner).
Theming
The spinner is drawn from currentColor — its ring uses a solid border with the
right edge made transparent to create the gap that rotates. When variant is set the
color resolves to that palette token (var(--bs-primary), var(--bs-success), …), so
re-skinning a theme color automatically recolors the matching spinner. To recolor a
single instance without a variant, set color in an inline style or on an ancestor.
Accessibility
Spinner ships role="status" so assistive technology announces it as a live status
region. Because the animation conveys “busy” visually only, add a visually hidden label
for screen-reader users, and mark the spinner aria-hidden when a visible text label
(such as “Loading…”) already communicates the state:
import { Spinner, VisuallyHidden } from '@metatoy/bootstrap-styled';
// Spinner is the only cue — give it an SR-only label:
<Spinner role="status">
<VisuallyHidden>Loading…</VisuallyHidden>
</Spinner>
// Visible text already labels the state — hide the spinner from SR:
<span aria-live="polite">
<Spinner size="sm" aria-hidden="true" /> Loading…
</span>The animation respects prefers-reduced-motion via the library’s global styles.
Explore in Ladle
This component does not have a dedicated Ladle story. Browse the full component gallery: Open Ladle ↗