Patternfly Logo

Examples

Simple

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

Props

Progress properties
NameTypeRequiredDefaultDescription
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__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