Theme

npm_versionnpm Paragon package page

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 (SCSS)#

$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;

Props API#

ProgressBar Props API

This is a pass through component from React-Bootstrap, see original props documentation here.

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.

  • 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.

Usage Insights#

ProgressBar

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.11
frontend-app-enterprise-public-catalog21.13.11

ProgressBarAnnotated

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.11