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.visuallyHidden
bool
DefaultfalseHide's the label visually.
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.