React

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
classNamestring''Classname for progress component.
size'sm' | 'md' | 'lg'null as ProgressSizeSize variant of progress.
measureLocation'outside' | 'inside' | 'top' | 'none'ProgressMeasureLocation.topWhere the measure percent will be located.
variant'danger' | 'success' | 'info'ProgressVariant.infoStatus variant of progress.
titlestring''Title above progress.
labelReact.ReactNodenull as React.ReactNodeText description of current progress value to display instead of percentage.
valuenumber0Actual value of progress.
idstring''DOM id for progress component.
minnumber0Minimal value of progress.
maxnumber100Maximum value of progress.
valueTextstringnull as stringAccessible 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