ProgressBar
ProgressBar provides a visual indicator showing the completion percentage of tasks, processes, or any measurable progress. It displays as a horizontal bar that fills from left to right based on the provided value between 0 (empty) and 1 (complete).Key features:
- Percentage visualization: Displays progress as a filled portion of a horizontal bar
- Flexible value handling: Accepts values from 0 to 1, with automatic bounds handling for out-of-range values
- Extensive theming: Customizable background color, indicator color, thickness, and border radius
- Responsive design: Adapts to container width while maintaining consistent height
Properties
value (default: 0)
This property defines the progress value with a number between 0 and 1.
The following example demonstrates using it:
<App>
<ProgressBar />
<ProgressBar value="0.2"/>
<ProgressBar value="0.6"/>
<ProgressBar value="1"/>
<ProgressBar value="1.2"/>
</App>Example: value
<App>
<ProgressBar />
<ProgressBar value="0.2"/>
<ProgressBar value="0.6"/>
<ProgressBar value="1"/>
<ProgressBar value="1.2"/>
</App>Events
This component does not have any events.
Exposed Methods
This component does not expose any methods.
Styling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-ProgressBar | $color-surface-200 | $color-surface-200 |
| borderRadius-indicator-ProgressBar | 0px | 0px |
| borderRadius-ProgressBar | $borderRadius | $borderRadius |
| color-indicator-ProgressBar | $color-primary-500 | $color-primary-500 |
| thickness-ProgressBar | $space-2 | $space-2 |