Progress

Examples

Simple Progress

Descriptive text here
33%
Copied to clipboard

Progress with additional label

Descriptive text here
Some label
Copied to clipboard

Progress Small

Descriptive text here
33%
Copied to clipboard

Progress Large

Descriptive text here
33%
Copied to clipboard

Progress Outside

Descriptive text here
33%
Copied to clipboard

Progress Inside

Descriptive text here
33%
Copied to clipboard

Progress Success

Success
33%
Copied to clipboard

Progress Failure

Failure due to an error
33%
Copied to clipboard

Progress Inside Success

Success
33%
Copied to clipboard

Progress Outside Failure

Failure due to an error
33%
Copied to clipboard

Progress Without Measure

Descriptive text here
Copied to clipboard

Progress Failure Without Measure

Descriptive text here
Copied to clipboard

Progress with Dynamic Description

Descriptive text here
33%
Copied to clipboard

Progress Props

The Progress component accepts the following props.

NameTypeRequiredDefaultDescription
className
string
''Classname for progress component.
size
enum: sm, md, lg
nullSize variant of progress.
measureLocation
enum: outside, inside, top, none
ProgressMeasureLocation.topWhere the measure percent will be located.
variant
enum: danger, success, info
ProgressVariant.infoStatus variant of progress.
title
string
''Title above progress.
label
node
Label to indicate what progress is showing.
value
number
0Actual value of progress.
id
string
''DOM id for progress component.
min
number
0Minimal value of progress.
max
number
100Maximum value of progress.
valueText
string
nullDynamic description of progress.