Mushilu-San UI Progress
Shows how far along a known task is, as a linear or circular bar.
Selector: mui-progress
import { Progress } from '@mushilu-san/ui/feedback';Loading example…
Overview
role="progressbar" with aria-valuenow from value and aria-valuemax from max. Set label to describe the task, so the bar is announced with a name.
indeterminate when the length of the task is unknown. The bar then animates without a value, and the host is marked aria-busy.
When to use
Uploads, installs and exports where the percentage is known. Steps in a multi-step process, such as 2 of 5 done.
When not to use
An operation with no known progress. Use an indeterminate progress or a spinner. Use Spinner instead.
Examples
Indeterminate
Loading example…
Guidelines
Do
Give labela name for the task, such as "Uploading photos".Update the value as the task moves, not in large jumps.
Don't
Do not show a progress bar that never finishes. Add an error state and a way out.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | progressbar | aria-valuenow and aria-valuemax set; aria-valuenow is removed when indeterminate. aria-busy="true" when indeterminate. |
A progress bar is not interactive. Announce completion with an alert or toast if the user needs to know.
API
Progress
| Name | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current value. Clamped between 0 and `max`. Default `0`. |
max | number | 100 | Value that means complete. Default `100`. |
variant | 'linear' | 'circular' | 'linear' | Shape of the indicator: `linear` bar or `circular` ring. Default `linear`. |
size | 'sm' | 'md' | 'lg' | 'md' | Indicator size: `sm`, `md` or `lg`. Default `md`. |
indeterminate | boolean | false | Shows an animated bar with no value, for tasks of unknown length. Accepts attribute presence, e.g. <… indeterminate>. |
label | string | undefined | — | Accessible name for the progress bar. |
CSS parts
::part(indicator)::part(root)
Tokens
--mui-color-primary--mui-color-border--mui-radius-full--mui-space-2