Progress bar
The
ProgressBar
component displays feedback on the status or duration of a given process.Basic usage
The
value
prop can be used to indicate the percentage of the progress bar that should be filled.tsxCopied1<ProgressBar label="Download progress" value={75} />
Sections
Alternatively, a progress bar can consist of multiple sections, each with its own
value
and
color
. It can also include a tooltip
that appears when the section is hovered.tsxCopied1<ProgressBar2label="Multiple file download progress"3sections={[4{5color: "blue",6value: 25,7tooltip: "file1.txt",8},9{10color: "yellow",11value: 35,12tooltip: "file2.txt",13},14{15color: "green",16value: 15,17tooltip: "file3.txt",18},19]}20/>
Component API
color
optional
default: primary
Color of the progress bar
grow
optional
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
height
optional
default: auto
label
optional
Label of the progress bar
radius
optional
default: 9999
Progress bar border radius. Defaults to 9999px to force a fully-circular border.
sections
optional
Sections of progress bar filled.
size
optional
default: md
Size of the progress bar
value
optional
Percentage of the progress bar filled.
width
optional
default: auto