Paragon Design System

Technical Documentation

Theme

PlaygroundBeta

npm_versionnpm Paragon package page

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

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 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#

ProgressBarAnnotated

Project NameParagon VersionInstance Count
frontend-app-admin-portal20.26.31

Contents

All components (A-Z)