Progress bar
The
ProgressBar
component displays feedback on the status or duration of a given process.Basic usage
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
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
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