Skip to Content
Patternfly Logo

Progress

Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. Progress bars can also inform users about their progress through a tutorial or a series of steps to reach completion. Related design guidelines: Progress bar

ExamplesPropsCSS Variables

Examples

Simple

Title
33%

Small

Title
33%

Large

Title
33%

Outside

Title
33%

Inside

Title
33%

Success

Title
100%

Failure

Title
33%

Inside success

Title
100%

Outside failure

Title
33%

Single line

33%

Without measure

Title

Failure without measure)

Title

Finite step

Title
2 of 5

Progress (step instruction)

Title
Step 2: Copying files

Props

Progress properties
NameTypeRequiredDefaultDescription
classNamestringNo''Classname for progress component.
size'sm' | 'md' | 'lg'NonullSize variant of progress.
measureLocation'outside' | 'inside' | 'top' | 'none'NoProgressMeasureLocation.topWhere the measure percent will be located.
variant'danger' | 'success' | 'info'NoProgressVariant.infoStatus variant of progress.
titlestringNo''Title above progress.
labelReact.ReactNodeNonullText description of current progress value to display instead of percentage.
valuenumberNo0Actual value of progress.
idstringNo''DOM id for progress component.
minnumberNo0Minimal value of progress.
maxnumberNo100Maximum value of progress.
valueTextstringNonullAccessible text description of current progress value, for when value is not a percentage. Use with label.

CSS Variables

--pf-c-progress__bar--BackgroundColorc_progress__bar_BackgroundColor
#fff
--pf-c-progress__bar--before--BackgroundColorc_progress__bar_before_BackgroundColor
#c9190b
--pf-c-progress__bar--before--Opacityc_progress__bar_before_Opacity
.2
--pf-c-progress__bar--Heightc_progress__bar_Height
1.5rem
--pf-c-progress__indicator--BackgroundColorc_progress__indicator_BackgroundColor
#06c
--pf-c-progress__indicator--Heightc_progress__indicator_Height
1rem
--pf-c-progress__status-icon--Colorc_progress__status_icon_Color
#c9190b
--pf-c-progress__status-icon--MarginLeftc_progress__status_icon_MarginLeft
0.5rem
--pf-c-progress--GridGapc_progress_GridGap
1rem
--pf-c-progress--m-danger__bar--BackgroundColorc_progress_m_danger__bar_BackgroundColor
#c9190b
--pf-c-progress--m-danger__status-icon--Colorc_progress_m_danger__status_icon_Color
#c9190b
--pf-c-progress--m-inside__indicator--MinWidthc_progress_m_inside__indicator_MinWidth
2rem
--pf-c-progress--m-inside__measure--Colorc_progress_m_inside__measure_Color
#151515
--pf-c-progress--m-inside__measure--FontSizec_progress_m_inside__measure_FontSize
0.875rem
--pf-c-progress--m-lg__bar--Heightc_progress_m_lg__bar_Height
1.5rem
--pf-c-progress--m-outside__measure--FontSizec_progress_m_outside__measure_FontSize
0.875rem
--pf-c-progress--m-sm__bar--Heightc_progress_m_sm__bar_Height
0.5rem
--pf-c-progress--m-sm__description--FontSizec_progress_m_sm__description_FontSize
0.875rem
--pf-c-progress--m-sm__measure--FontSizec_progress_m_sm__measure_FontSize
0.875rem
--pf-c-progress--m-success__bar--BackgroundColorc_progress_m_success__bar_BackgroundColor
#92d400
--pf-c-progress--m-success__status-icon--Colorc_progress_m_success__status_icon_Color
#92d400
--pf-c-progress--m-success--m-inside__measure--Colorc_progress_m_success_m_inside__measure_Color
#151515