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

Show editable code example

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" />
</>

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

Show editable code example

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>

<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

Show editable code example

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"
  />
</>

<>
  <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 Name	Paragon Version	Instance Count
	frontend-app-admin-portal	20.39.2	1

Leave feedback

Paragon Design System

Theme

Progress Bar

Basic Usage

Basic Usage (Inverse Pallete)

Annotated variant

Theme Variables (SCSS)#

Props API#

Usage Insights#

ProgressBarAnnotated

All components (A-Z)

Theme

Progress Bar

Basic Usage#

Basic Usage (Inverse Pallete)#

Annotated variant#

Theme Variables (SCSS)#

Props API#

Usage Insights#

ProgressBarAnnotated

All components (A-Z)

Basic Usage

Basic Usage (Inverse Pallete)

Annotated variant