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'

    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'

    Variant for threshold value.

  • progressHint node

    Text near the progress annotation.

  • thresholdHint node

    Text near the threshold annotation.