Progress Bar
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
Basic Usage (Inverse Pallete)
Annotated variant
Theme Variables (SCSS)#
// Progress bars$progress-height: 1rem !default;$annotated-progress-height: .3125rem !default;$progress-font-size: $font-size-base * .75 !default;$progress-bg: transparent !default;$progress-border-radius: 0 !default;$progress-box-shadow: none !default;$progress-bar-color: $white !default;$progress-bar-bg: theme-color("accent-a") !default;$annotated-progress-bar-bg: theme-color("dark") !default;$progress-bar-animation-timing: 1s linear infinite !default;$progress-bar-transition: width .6s ease !default;$progress-bar-border-width: 1px !default;$progress-bar-border-color: $gray-500 !default;$progress-threshold-circle: .5625rem !default;$progress-hint-annotation-gap: .5rem !default;$progress-colors: ("dark": $primary-500,"success": $success-500,"error": $danger-500,"warning": $accent-b,) !default;
ProgressBar Props API
This component does not receive any props.
ProgressBarAnnotated Props API
- now
number
Current value of progress.
- label
node
Show label that represents visual percentage.
- variant
enum
'dark' | 'warning' | 'success' | 'error'Default'warning'The
ProgressBar
style variant to use. - className
string
Specifies an additional
className
to add to the base element. - threshold
number
Threshold current value.
- thresholdLabel
node
Specifies label for
threshold
. - thresholdVariant
enum
'dark' | 'warning' | 'success' | 'error'Default'dark'Variant for threshold value.
- progressHint
node
Text near the progress annotation.
- thresholdHint
node
Text near the threshold annotation.