Loaders

Open in Playground

Loader is the loading indicator, in seven styles chosen with variant: the spinning fan with its label underneath (the default, built on FanFavicon), a circular spinner, text loaders (dots and shimmer) and spinner-with-text layouts (inline, stacked, card). It is a polite live region (role="status"): the spinner, which shows no text, reads its label to screen readers only.

fan

spinner

dots

shimmer

inline

stacked

LoadingFetching bananas

card

size is sm, md or lg.

fan

Loading, small

Loading, large

spinner

inline

Loading, small

Loading, large

Pass icon to use your own mark instead of the built-in fan or ring: an emoji, an image URL or path (including an .svg file or a data: URI), or an element such as an inline <svg>. It is sized to the loader and animated by iconMotion (spin, pulse, bounce or none). dots and shimmer have no mark, so they ignore it.

Launching

Image or SVG URL

Stealing the moonEmoji with pulse

Inline SVG element

Props

Loader

variant'fan' | 'spinner' | 'dots' | 'shimmer' | 'inline' | 'stacked' | 'card'
Default: 'fan'
Loader style. fan renders FanFavicon; the others are described above.
size'sm' | 'md' | 'lg'
Default: 'md'
Overall size (fan 32 / 64 / 96 px, ring 16 / 32 / 48 px; the text scales with it).
labelstring
Default: 'Loading'
Loading text shown by every variant except spinner (which keeps it for screen readers only).
descriptionstring
Helper line under the label (card variant only).
iconstring | ReactNode
Custom mark instead of the built-in fan or ring: an emoji, an image URL or path (png, svg, data:…) or an element such as an inline <svg>. Ignored by dots and shimmer.
iconMotion'spin' | 'pulse' | 'bounce' | 'none'
Default: 'spin'
How the custom icon animates.
classNamestring
Default: ''
Extra classes for the root element.

Loader props
Prop	Type	Default	Description
`variant`	'fan' \| 'spinner' \| 'dots' \| 'shimmer' \| 'inline' \| 'stacked' \| 'card'	`'fan'`	Loader style. fan renders FanFavicon; the others are described above.
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Overall size (fan 32 / 64 / 96 px, ring 16 / 32 / 48 px; the text scales with it).
`label`	string	`'Loading'`	Loading text shown by every variant except spinner (which keeps it for screen readers only).
`description`	string	–	Helper line under the label (card variant only).
`icon`	string \| ReactNode	–	Custom mark instead of the built-in fan or ring: an emoji, an image URL or path (png, svg, data:…) or an element such as an inline <svg>. Ignored by dots and shimmer.
`iconMotion`	'spin' \| 'pulse' \| 'bounce' \| 'none'	`'spin'`	How the custom icon animates.
`className`	string	`''`	Extra classes for the root element.

FanFavicon

sizenumber
Default: 64
Size in px.
theme'light' | 'dark'
Force a theme instead of following the page.
labelstring
Accessible label.

FanFavicon props
Prop	Type	Default	Description
`size`	number	`64`	Size in px.
`theme`	'light' \| 'dark'	–	Force a theme instead of following the page.
`label`	string	–	Accessible label.

Related hooks and theme:buildFaviconHref