ProgressBar
A bar to indicate the completed progress of a task.
This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.
Basic Usage
Any Paragon component or export may be added to the code example.
Basic Usage (Inverse Pallete)
Any Paragon component or export may be added to the code example.
Annotated variant
Any Paragon component or export may be added to the code example.
Theme Variables#
| CSS Variable | Computed Value |
|---|---|
| | |
| | |
| | |
| | |
| | |
Props API#
This is a pass through component from React-Bootstrap, see original props documentation here.
- now
numberCurrent value of progress.
- label
nodeShow label that represents visual percentage.
- variant
enum'dark' | 'warning' | 'success' | 'error'Default'warning'The
ProgressBarstyle variant to use. - className
stringSpecifies an additional
classNameto add to the base element. - threshold
numberThreshold current value.
- thresholdLabel
nodeSpecifies label for
threshold. - thresholdVariant
enum'dark' | 'warning' | 'success' | 'error'Default'dark'Variant for threshold value.
- progressHint
nodeText near the progress annotation.
- thresholdHint
nodeText near the threshold annotation.
Usage Insights#
ProgressBar
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-admin-portal | 21.13.1 | 1 | |
| frontend-app-enterprise-public-catalog | 21.13.1 | 1 |
ProgressBarAnnotated
| Project Name | Paragon Version | Instance Count | |
|---|---|---|---|
| frontend-app-admin-portal | 21.13.1 | 1 |