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.

<>

  <ProgressBar now={60} label="60%" variant="primary" />

  <br />

  <ProgressBar now={60} label="60%" variant="success" />

  <br />

  <ProgressBar now={60} label="60%" variant="brand" />

  <br />

  <ProgressBar now={60} label="60%" variant="warning" />

</>

Basic Usage (Inverse Pallete)

Any Paragon component or export may be added to the code example.

<div className="bg-dark-700 p-4">

  <ProgressBar now={60} label="60%" />

  <br />

  <ProgressBar now={60} label="60%" variant="success" />

  <br />

  <ProgressBar now={60} label="60%" variant="brand" />

  <br />

  <ProgressBar now={60} label="60%" variant="warning" />

</div>

Annotated variant

Any Paragon component or export may be added to the code example.

<>

  <ProgressBar.Annotated

    now={20}

    label="20%"

    variant="success"

    threshold={50}

    thresholdLabel="50%"

    thresholdVariant="dark"

    progressHint="Progress"

    thresholdHint="Threshold"

  />

</>

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
Leave feedback

Contents

All components (A-Z)