Progress
Represent the completion status of a task or process
Source ↗️ Report Issue ↗️Use the Progress
component to provide users with feedback on the progress of ongoing activities such as data processing, form progress, task completion, isntallation or updates, or use them as general loading indicators.
Sizes
Progress bars comes with three different sizes out of the box: small
(default), medium
, and large
:
Styles
Progress bars can also be styled in many different way by using the following props:
Using these props allows you to style progress bars individually. However, if you have the same styles for every progress bar globally, the recommended way to change their style is by overriding the following CSS variables:
Labels
Progress bars can also be labelled by setting the label
prop to true
. The label will take the color of the background:
To display a label outside of the progress bar, omit the label
prop and add the label outside of the component:
Progress33%
API
Prop | Purpose |
---|---|
value | Set the value of the pogress from 0 to 100. |
size | Set the size of the of the progress bar. |
label | Shows the progress with a label inside the progress bar. Defaults to false . |
color | Set the color of the progress bar. |
background | Set the background color of the progress bar. |
square | Changes the style of the progress bar from rounded to square. Defaults to false . |
striped | Changes the style of the progress bar to striped. Defaults to false . |
stripeLight | Set the light color of striped progress bars. |
stripeDark | Set the dark color of striped progress bars. |
className | Pass additional CSS classes for the progress bar. |
Request improvement for this page