bref Spinner
Show loading status or a decorative animated ring.
Usage
Loading results
<Spinner label="Loading results" />
Playground
Live preview
Loading results
Settings
View generated code
<script>
import { Spinner } from 'bref-ui';
</script>
<span style="color: var(--color-primary); font-size: 2rem"
><Spinner size="medium" label={'Loading results'} /></span
>
Sizes
Loading x-small
Loading small
Loading medium
Loading large
Loading x-large
Inherited colors
Loading foreground results
Loading primary results
Loading secondary results
Loading muted results
Loading info results
Loading success results
Loading warning results
Loading error results
<span style="color: var(--color-primary)"><Spinner label="Loading results" /></span>
Props and accessibility
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
label | string | No | — | Optional screen reader status text; omit for a decorative ring. |
size | Size | No | Inherited | Matches Icon sizes; omitted size inherits surrounding font size. |
The ring inherits the surrounding text color. A supplied label creates status text for assistive technology; an unlabeled ring is decorative. Reduced motion leaves a visible, stationary quarter-ring.