Skip to content
Patternfly Logo

Progress

Examples

Basic

Small

Large

Outside

Inside

33%

Success

Failure

Warning

Inside success

100%

Outside failure

Single line

Without measure

Failure without measure

Finite step

Progress (step instruction)

Truncate title

Title outside of progress bar

Title outside of progress bar

Props

Progress

NameTypeRequiredDefaultDescription
aria-labelstringNonullAdds accessible text to the ProgressBar. Required when title not used and there is not any label associated with the progress bar
aria-labelledbystringNonullAssociates the ProgressBar with it's label for accessibility purposes. Required when title not used
classNamestringNo''Classname for progress component.
idstringNo''DOM id for progress component.
isTitleTruncatedbooleanNofalseIndicate whether to truncate the title
labelReact.ReactNodeNonullText description of current progress value to display instead of percentage.
maxnumberNo100Maximum value of progress.
measureLocation'outside' | 'inside' | 'top' | 'none'NoProgressMeasureLocation.topWhere the measure percent will be located.
minnumberNo0Minimal value of progress.
size'sm' | 'md' | 'lg'NonullSize variant of progress.
titlestringNo''Title above progress.
tooltipPosition'auto' | 'top' | 'bottom' | 'left' | 'right'No'top'Position of the tooltip which is displayed if title is truncated
valuenumberNo0Actual value of progress.
valueTextstringNonullAccessible text description of current progress value, for when value is not a percentage. Use with label.
variant'danger' | 'success' | 'warning'NonullStatus variant of progress.

CSS variables

.pf-c-progress--pf-c-progress--GridGap
1rem
.pf-c-progress--pf-c-progress__bar--before--BackgroundColor
#06c
.pf-c-progress--pf-c-progress__bar--Height
1rem
.pf-c-progress--pf-c-progress__bar--BackgroundColor
#fff
.pf-c-progress--pf-c-progress__measure--m-static-width--MinWidth
4.5ch
.pf-c-progress--pf-c-progress__status-icon--Color
#151515
.pf-c-progress--pf-c-progress__status-icon--MarginLeft
0.5rem
.pf-c-progress--pf-c-progress__bar--before--Opacity
.2
.pf-c-progress--pf-c-progress__indicator--Height
1rem
.pf-c-progress--pf-c-progress__indicator--BackgroundColor
#06c
.pf-c-progress--pf-c-progress--m-success__bar--BackgroundColor
#3e8635
.pf-c-progress--pf-c-progress--m-warning__bar--BackgroundColor
#f0ab00
.pf-c-progress--pf-c-progress--m-danger__bar--BackgroundColor
#c9190b
.pf-c-progress--pf-c-progress--m-success__status-icon--Color
#3e8635
.pf-c-progress--pf-c-progress--m-warning__status-icon--Color
#f0ab00
.pf-c-progress--pf-c-progress--m-danger__status-icon--Color
#c9190b
.pf-c-progress--pf-c-progress--m-inside__indicator--MinWidth
2rem
.pf-c-progress--pf-c-progress--m-inside__measure--Color
#fff
.pf-c-progress--pf-c-progress--m-success--m-inside__measure--Color
#fff
.pf-c-progress--pf-c-progress--m-warning--m-inside__measure--Color
#151515
.pf-c-progress--pf-c-progress--m-inside__measure--FontSize
0.875rem
.pf-c-progress--pf-c-progress--m-outside__measure--FontSize
0.875rem
.pf-c-progress--pf-c-progress--m-sm__bar--Height
0.5rem
.pf-c-progress--pf-c-progress--m-sm__description--FontSize
0.875rem
.pf-c-progress--pf-c-progress--m-sm__measure--FontSize
0.875rem
.pf-c-progress--pf-c-progress--m-lg__bar--Height
1.5rem
.pf-c-progress.pf-m-sm--pf-c-progress__bar--Height
0.5rem
.pf-c-progress.pf-m-lg--pf-c-progress__bar--Height
1.5rem
.pf-c-progress.pf-m-success--pf-c-progress__bar--before--BackgroundColor
#3e8635
.pf-c-progress.pf-m-success--pf-c-progress__status-icon--Color
#3e8635
.pf-c-progress.pf-m-success--pf-c-progress--m-inside__measure--Color
#fff
.pf-c-progress.pf-m-warning--pf-c-progress__bar--before--BackgroundColor
#f0ab00
.pf-c-progress.pf-m-warning--pf-c-progress__status-icon--Color
#f0ab00
.pf-c-progress.pf-m-warning--pf-c-progress--m-inside__measure--Color
#151515
.pf-c-progress.pf-m-danger--pf-c-progress__bar--before--BackgroundColor
#c9190b
.pf-c-progress.pf-m-danger--pf-c-progress__status-icon--Color
#c9190b

View source on GitHub