Skip to content
PatternFly logo

Progress

A progress bar informs users about the completion status of an ongoing process or task.

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 with step instructions

Truncate title

Title outside of progress bar

Title outside of progress bar

Helper text Beta


Default variant is being displayed

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.
helperTextBetaReact.ReactNodeContent which can be used to convey additional information about the progress component. We recommend the helper text component as it was designed for this purpose.
idstring''DOM id for progress component.
isTitleTruncatedbooleanfalseIndicate whether to truncate the string 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.
titleReact.ReactNode''Title above progress. The isTitleTruncated property will only affect string titles. Node title truncation must be handled manually.
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__helper-text--MarginTop
calc(0.25rem - 1rem)
.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