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

*required
NameTypeDefaultDescription
aria-labelstringnullAdds accessible text to the ProgressBar. Required when title not used and there is not any label associated with the progress bar
aria-labelledbystringnullAssociates the ProgressBar with it's label for accessibility purposes. Required when title not used
classNamestring''Classname for progress component.
idstring''DOM id for progress component.
isTitleTruncatedbooleanfalseIndicate whether to truncate the title
labelReact.ReactNodenullText description of current progress value to display instead of percentage.
maxnumber100Maximum value of progress.
measureLocation'outside' | 'inside' | 'top' | 'none'ProgressMeasureLocation.topWhere the measure percent will be located.
minnumber0Minimal value of progress.
size'sm' | 'md' | 'lg'nullSize variant of progress.
titlestring''Title above progress.
tooltipPosition'auto' | 'top' | 'bottom' | 'left' | 'right''top'Position of the tooltip which is displayed if title is truncated
valuenumber0Actual value of progress.
valueTextstringnullAccessible text description of current progress value, for when value is not a percentage. Use with label.
variant'danger' | 'success' | 'warning'nullStatus 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