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 progress

Title
33%
Copied to clipboard

Progress (Small)

Title
33%
Copied to clipboard

Progress (large)

Title
33%
Copied to clipboard

Progress (outside)

Title
33%
Copied to clipboard

Progress (inside)

Title
33%
Copied to clipboard

Progress (success)

Title
100%
Copied to clipboard

Progress (failure)

Title
33%
Copied to clipboard

Progress (inside success)

Title
100%
Copied to clipboard

Progress (outside failure)

Title
33%
Copied to clipboard

Progress (single line)

33%
Copied to clipboard

Progress (no measure)

Title
Copied to clipboard

Progress (failure + no measure)

Title
Copied to clipboard

Progress (finite step)

Title
2 of 5
Copied to clipboard

Progress (step instruction)

Title
Step 2: Copying files
Copied to clipboard

Props

Progress Props

The Progress component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Classname for progress component.
sizeenumnullSize variant of progress.
measureLocationenumProgressMeasureLocation.topWhere the measure percent will be located.
variantenumProgressVariant.infoStatus variant of progress.
titlestring''Title above progress.
labelnodenullText 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.
valueTextstringnullAccessible text description of current progress value, for when value is not a percentage. Use with label.

CSS Variables

--pf-c-progress--GridGapc_progress_GridGap1rem
--pf-c-progress__bar--BackgroundColorc_progress__bar_BackgroundColor#fff
--pf-c-progress__bar--Heightc_progress__bar_Height1.5rem
--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__indicator--BackgroundColorc_progress__indicator_BackgroundColor#06c
--pf-c-progress__indicator--Heightc_progress__indicator_Height1rem
--pf-c-progress__status-icon--Colorc_progress__status_icon_Color#c9190b
--pf-c-progress__status-icon--MarginLeftc_progress__status_icon_MarginLeft0.5rem
--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_MinWidth2rem
--pf-c-progress--m-inside__measure--Colorc_progress_m_inside__measure_Color#151515
--pf-c-progress--m-inside__measure--FontSizec_progress_m_inside__measure_FontSize0.875rem
--pf-c-progress--m-lg__bar--Heightc_progress_m_lg__bar_Height1.5rem
--pf-c-progress--m-outside__measure--FontSizec_progress_m_outside__measure_FontSize0.875rem
--pf-c-progress--m-sm__bar--Heightc_progress_m_sm__bar_Height0.5rem
--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