Loader
Renders an animated SVG spinner inside a role="status" span to indicate an ongoing operation. Three animation styles are available: oval (rotating arc), bars (pulsing rectangles), and dots (bouncing circles).
Types
oval
bars
dots
<Loader type="oval" />
<Loader type="bars" />
<Loader type="dots" />Sizes
<Loader size="xs" />
<Loader size="sm" />
<Loader size="md" />
<Loader size="lg" />
<Loader size="xl" />Colors
<Loader color="blue" />
<Loader color="violet" />
<Loader color="green" />Custom pixel size
<Loader size={20} />
<Loader size={40} />
<Loader size={80} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'xs'|'sm'|'md'|'lg'|'xl'|number|string | — | Width and height of the spinner |
color | string | — | Color applied to the spinner SVG |
type | 'oval'|'bars'|'dots' | 'oval' | SVG animation style |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |