Progress
Give user feedback for status of the task
Import
Source
Docs
Package
Usage
Progress component has one required prop value
– filled bar width in %.
You can change bar color by passing color
prop, by default theme.primaryColor
will be used.
If you set striped
prop to true bar will have stripes.
Color
Shades
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Multiple sections
You can display multiple sections instead of a single progress bar.
Note that in this case value
prop will be ignored:
Sections props
You can add any additional props to sections:
Hovered section: none
Sections tooltips
Add tooltip
property to section to display floating Tooltip when user hovers over it:
Colors
In previous examples colors from theme.colors
were used, but any other css colors can be used instead:
Example
Password strength meter example with Progress component:
With label
Accessibility
- Progress bar element has
role="progressbar"
attribute - Progress bar element has
aria-valuenow
attribute with current value aria-valuemin
andaria-valuemax
attributes are always set to 0 and 100 as component does not support other values
Provide aria-label attribute to label progress:
Progress component props
Name | Type | Description |
---|---|---|
animate | boolean | Whether to animate striped progress bars |
color | MantineColor | Progress color from theme |
label | string | Text to be placed inside the progress bar |
max | number | default: 100 |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
sections | ProgressSection[] | Replaces value if present, renders multiple sections instead of single one |
size | number | "xs" | "sm" | "md" | "lg" | "xl" | Height of progress bar |
striped | boolean | Adds stripes |
value | number | Percent of filled bar (0-max) |
Progress component Styles API
Name | Static selector | Description |
---|---|---|
root | .asuikit-Progress-root | Root element |
bar | .asuikit-Progress-bar | Filled bar |
label | .asuikit-Progress-label | Progress label |