Loader

Feedback · src/components/Loader/Loader.tsx

Something is happening and the share is unknown.

When there is an honest number, use Progress. A spinner that could have been a percentage wastes the one thing the person wants to know.

The label is always in the DOM - visible with showLabel, otherwise screen-reader only. A silent spinner is a page that looks broken to anyone who cannot see it move. live={false} exists for a screen with several loaders, where every one announcing itself turns into noise.

Import

import { Loader } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
label	string	What is loading. Announced even when not shown.
showLabel	boolean	Print the label beside the bars.
size	'sm' | 'md' | 'lg'
tone	'brand' | 'neutral' | 'inverse'
live	boolean	false stops it announcing. For several loaders on one screen.
className	string