Mushilu-San UI Spinner
An animated indicator that shows work is in progress and the page is waiting.
Selector: mui-spinner
import { Spinner } from '@mushilu-san/ui/primitives';Loading example…
Overview
role="status" and an aria-label from label (default "Loading"), so screen readers announce that work is in progress.
When to use
Waiting for a short operation where the layout does not yet know the final content. Showing progress inside a Button while it is loading, or next to a region that is refreshing.
When not to use
Operations with a known duration. Use Progress so the user sees how far along it is. Loading a whole page of content. Use Skeleton to show the shape of what is coming.
Examples
Custom label
label to describe what is loading, so the announcement is useful.
Loading example…
Guidelines
Do
Set labelto describe the operation, such as "Saving draft".Keep the surrounding content visible while the spinner runs when possible.
Don't
Do not show a spinner forever. Add a timeout and an error message. Do not hide the spinner with display: nonewhile work is still running, or the status is lost.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | status | aria-label comes from label. |
svg | — | aria-hidden="true", decorative. |
Use aria-busy="true"on the region that is loading, so assistive technology knows it is updating.
API
Spinner
| Name | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Spinner size: `sm` (16px) to `xl` (48px). Default `md` (24px). |
color | 'primary' | 'inherit' | 'muted' | 'danger' | 'success' | 'warning' | 'inherit' | Spinner colour from the semantic palette. `inherit` uses the surrounding text colour. |
label | string | 'Loading' | Text announced to screen readers while loading. Default `Loading`. |
CSS parts
::part(root)
Tokens
--mui-color-primary--mui-color-text-muted--mui-color-danger--mui-color-success--mui-color-warning