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. You can also pass any HTML attributes, such as onClick, role, etc. Which attributes are available depends on whether or not you have overriden the underlying HTML element using the as property.
- now
numberCurrent value of progress.
- label
React.ReactNodeShow label that represents visual percentage.
- variant
typeof VARIANTS[number]Default'warning'The
ProgressBarstyle variant to use. - className
stringSpecifies an additional
classNameto add to the base element. - threshold
numberThreshold current value.
- thresholdLabel
React.ReactNodeSpecifies label for
threshold. - thresholdVariant
typeof VARIANTS[number]Default'dark'Variant for threshold value.
- progressHint
React.ReactNodeText near the progress annotation.
- thresholdHint
React.ReactNodeText 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 |