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

Copied to clipboard

Progress (Small)

Copied to clipboard

Progress (large)

Copied to clipboard

Progress (outside)

Copied to clipboard

Progress (inside)

Copied to clipboard

Progress (success)

Copied to clipboard

Progress (failure)

Copied to clipboard

Progress (inside success)

Copied to clipboard

Progress (outside failure)

Copied to clipboard

Progress (single line)

Copied to clipboard

Progress (no measure)

Copied to clipboard

Progress (failure + no measure)

Copied to clipboard

Progress (finite step)

Copied to clipboard

Progress (step instruction)

Copied to clipboard

Props

Progress Props

The Progress component accepts the following props.

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--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-sm__description--FontSizec_progress_m_sm__description_FontSize0.875rem
--pf-c-progress--m-sm__measure--FontSizec_progress_m_sm__measure_FontSize0.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