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.

    Default'warning'
  • className
    string

    Specifies an additional className to add to the base element.

  • visuallyHidden
    bool

    Hide's the label visually.

    Defaultfalse
  • threshold
    number

    Threshold current value.

  • thresholdLabel
    node

    Specifies label for threshold.

  • thresholdVariant
    enum'dark' | 'warning' | 'success' | 'error'

    Variant for threshold value.

    Default'dark'
  • progressHint
    node

    Text near the progress annotation.

  • thresholdHint
    node

    Text near the threshold annotation.