'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Feedback
Progress and Meter
How far a task has come, and how much of something is used.
Ant Design: Progress
import { ProgressBar, ProgressCircle, Meter, ProgressSegments } from '@alea/ui';
Examples
Progress bar
Determinate with a value, indeterminate without.
Exporting variables10%
Progress circle
For compact places.
85%
Meter
An amount within a range. tone="auto" turns warning and danger as it fills.
Free uses left7 of 10
Storage78%
Quota96%
Segments
One bar split into parts: a meter that names every part.
Storage77 GB of 100 GB
Props
ProgressBar props
How far a task has come. Without value it is indeterminate.
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | - | The visible label. |
showValue | boolean | - | Show the percent (or valueLabel) next to the label. Default true when there is a label. |
size | "sm" | "md" | 'md' | Track height: sm 4 px or md 8 px (default). |
ProgressCircle props
Circular progress, for compact places.
| Prop | Type | Default | Description |
|---|---|---|---|
showValue | boolean | - | Show the percent in the middle (md and lg). |
size | "sm" | "md" | "lg" | 'md' | sm 24, md 40 (default), lg 64 px. |
Meter props
A measured amount within a known range (storage, password strength, contrast). Not progress.
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | - | The visible label. |
showValue | boolean | true | Show the value next to the label. Default true. |
tone | "auto" | Tone | 'accent' | Color by level: auto turns warning above 70% and danger above 90% (storage, quota). |
ProgressSegments props
One bar split into parts: storage by type, budget by team (Mantine Progress sections).
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | ReactNode | - | Name of the bar ("Storage"). |
segmentsrequired | { label: string; value: number; color?: string | undefined; }[] | - | The parts: label, value and an optional color (defaults to the chart colors). |
className | string | - | |
showLegend | boolean | true | Shows the legend under the bar. Default true. |
total | number | - | The whole. Default the sum of the values. |
valueFormat | ((v: number) => string) | v | Formats each value in the legend, e.g. v => `${v} GB`. |
Accessibility
- Progress bars and meters are announced with their value; label them.
Do and don't
Do
- Use ProgressBar for tasks and Meter for amounts (storage, score).
- Give it a label so screen readers say what is progressing.
Don't
- Don't use a determinate bar when you can't know the progress: use isIndeterminate.
- Don't show a bar for things that finish under a second.