Loader
Loader components provide visual feedback to users while content is being loaded, data is being fetched, or actions are being processed. The component supports two distinct variants — an animated spinner for indeterminate loading and a progress bar for determinate, percentage-based loading.
Loading Code Block...Full example
Section titled “Full example”A basic spinner loader with default settings.
Loading Code Block...Variants
Section titled “Variants”The component supports two variants:
| Variant | Description |
|---|---|
spinner | Animated circular spinner for indeterminate loading states |
progress | Horizontal bar with percentage for determinate loading |
Spinner sizes
Section titled “Spinner sizes”The spinner variant supports five size options:
| Size | Dimensions | Text size |
|---|---|---|
sm | 24×24 px | text-xs |
md | 32×32 px | text-xs |
lg | 40×40 px | text-sm |
xl | 48×48 px | text-base |
xxl | 56×56 px | text-base |
sm
md
lg
xl
xxl
Loading Code Block...Progress percentage position
Section titled “Progress percentage position”When using the progress variant with showPercentage, the percentage label can be placed in three positions. Use the interactive demo below to adjust the progress value and test the available positions:
| Position | Description |
|---|---|
top-left | Percentage text aligned to the left above the bar |
top-right | Percentage text aligned to the right above the bar |
center | Percentage text displayed inline to the right of the bar |
45%
45%
Loading Code Block...Common props
Section titled “Common props”| Props | Default | Type | Description |
|---|---|---|---|
| variant | 'spinner' | 'spinner' | 'progress' | The loading indicator variant to render. |
| text | - | string | Optional text displayed below the spinner or progress bar. |
| primaryColor | 'bg-theme-accent-primary' | string | Colour of the active/filled portion. Accepts Tailwind classes (e.g. 'text-blue-500', 'bg-green-600') or hex values (e.g. '#00C853'). |
| secondaryColor | 'text-white' | string | Colour of the inactive/track portion (spinner only). Accepts Tailwind classes or hex values. |
Spinner props
Section titled “Spinner props”| Props | Default | Type | Description |
|---|---|---|---|
| size | 'md' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | The size of the spinner. Controls both the SVG dimensions and accompanying text size. |
Progress props
Section titled “Progress props”| Props | Default | Type | Description |
|---|---|---|---|
| progressPercentage | 20 | number | The current progress value. Values outside `[0, 100]` are clamped. |
| showPercentage | false | boolean | Whether to display the numeric percentage alongside the progress bar. |
| percentagePosition | 'top-left' | 'top-left' | 'top-right' | 'center' | Position of the percentage text relative to the progress bar. Only applies when showPercentage is true. |
Accessibility
Section titled “Accessibility”- The spinner SVG uses
aria-hidden="true"since it is purely decorative — the loading state message should be conveyed via adjacent text - Use the
textprop to provide a human-readable loading message (e.g. “Loading data…”) - For progress bars, the numeric percentage provides concrete feedback to assistive technologies
- Consider using
aria-live="polite"on the container when dynamically showing/hiding loaders