imitation
Progress
A linear progress bar.
ProgressLinear progress
Harbour rebrand84% done
Crew interviews33%
Tasks9 of 14
In context
File uploadOne bar per file, a count on top
Uploading 3 files
2 of 3mark-stacked.svg100%
depot-fascia-final.pdf62%
van-livery-photos.zipWaiting
Thin usage bar
TokensHeight, radius, track and fill per status: --rebar-progress-*.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
value | number | undefined | No | 0 |
max | number | undefined | No | 100 |
status | "normal" | "error" | "success" | "warning" | undefined | No | normal |
indeterminate | boolean | undefined | No | — |
size | "sm" | "md" | "lg" | undefined | No | md |
className | string | undefined | No | — |
aria-label | string | undefined | No | — |
Accessibility
A real Radix role="progressbar" with aria-valuenow/aria-valuemax. Pass aria-label, and show the number as text next to it: the bar alone is not enough.
data-rebar-* attributes
data-rebar-component="progress" on the root; data-rebar-part="indicator" on the fill.
Migrating to Ant Design
AntD's Progress (type="line", its default) takes the same value as percent: a close, low-risk rename.
Warning status
status="warning" colours the bar in the warning tone, for a quota that is nearly used or a step that needs attention.
<Progress value={85} status="warning" aria-label="Storage" />