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

Success variant

Warning variant

Danger variant

Default variant is being displayed

Props

Progress

*required
Name	Type	Default	Description
aria-label	string	null	Adds accessible text to the ProgressBar. Required when title not used and there is not any label associated with the progress bar
aria-labelledby	string	null	Associates the ProgressBar with it's label for accessibility purposes. Required when title not used
className	string	''	Classname for progress component.
helperTextBeta	React.ReactNode		Content 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.
id	string	''	DOM id for progress component.
isTitleTruncated	boolean	false	Indicate whether to truncate the string title
label	React.ReactNode	null	Text description of current progress value to display instead of percentage.
max	number	100	Maximum value of progress.
measureLocation	'outside' \| 'inside' \| 'top' \| 'none'	ProgressMeasureLocation.top	Where the measure percent will be located.
min	number	0	Minimal value of progress.
size	'sm' \| 'md' \| 'lg'	null	Size variant of progress.
title	React.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
value	number	0	Actual value of progress.
valueText	string	null	Accessible text description of current progress value, for when value is not a percentage. Use with label.
variant	'danger' \| 'success' \| 'warning'	null	Status variant of progress.

CSS variables


	.pf-c-progress	--pf-c-progress--GridGap	1rem
--pf-c-progress--GridGap --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-progress	--pf-c-progress__bar--before--BackgroundColor	#06c
--pf-c-progress__bar--before--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-progress	--pf-c-progress__bar--Height	1rem
--pf-c-progress__bar--Height --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-progress	--pf-c-progress__bar--BackgroundColor	#fff
--pf-c-progress__bar--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #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__status-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-progress	--pf-c-progress__status-icon--MarginLeft	0.5rem
--pf-c-progress__status-icon--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-progress	--pf-c-progress__bar--before--Opacity	.2
	.pf-c-progress	--pf-c-progress__indicator--Height	1rem
--pf-c-progress__indicator--Height --pf-c-progress__bar--Height --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-progress	--pf-c-progress__indicator--BackgroundColor	#06c
--pf-c-progress__indicator--BackgroundColor --pf-c-progress__bar--before--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-progress	--pf-c-progress__helper-text--MarginTop	calc(0.25rem - 1rem)
--pf-c-progress__helper-text--MarginTop calc(--pf-global--spacer--xs - --pf-c-progress--GridGap) calc($pf-global--spacer--xs - --pf-global--spacer--md) calc($pf-global--spacer--xs - $pf-global--spacer--md) calc(pf-size-prem(4px) - pf-size-prem(16px)) calc(0.25rem - 1rem)
	.pf-c-progress	--pf-c-progress--m-success__bar--BackgroundColor	#3e8635
--pf-c-progress--m-success__bar--BackgroundColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-progress	--pf-c-progress--m-warning__bar--BackgroundColor	#f0ab00
--pf-c-progress--m-warning__bar--BackgroundColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-progress	--pf-c-progress--m-danger__bar--BackgroundColor	#c9190b
--pf-c-progress--m-danger__bar--BackgroundColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-progress	--pf-c-progress--m-success__status-icon--Color	#3e8635
--pf-c-progress--m-success__status-icon--Color --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-progress	--pf-c-progress--m-warning__status-icon--Color	#f0ab00
--pf-c-progress--m-warning__status-icon--Color --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-progress	--pf-c-progress--m-danger__status-icon--Color	#c9190b
--pf-c-progress--m-danger__status-icon--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-progress	--pf-c-progress--m-inside__indicator--MinWidth	2rem
--pf-c-progress--m-inside__indicator--MinWidth --pf-global--spacer--xl $pf-global--spacer--xl pf-size-prem(32px) 2rem
	.pf-c-progress	--pf-c-progress--m-inside__measure--Color	#fff
--pf-c-progress--m-inside__measure--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-progress	--pf-c-progress--m-success--m-inside__measure--Color	#fff
--pf-c-progress--m-success--m-inside__measure--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-progress	--pf-c-progress--m-warning--m-inside__measure--Color	#151515
--pf-c-progress--m-warning--m-inside__measure--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-progress	--pf-c-progress--m-inside__measure--FontSize	0.875rem
--pf-c-progress--m-inside__measure--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-progress	--pf-c-progress--m-outside__measure--FontSize	0.875rem
--pf-c-progress--m-outside__measure--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-progress	--pf-c-progress--m-sm__bar--Height	0.5rem
--pf-c-progress--m-sm__bar--Height --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-progress	--pf-c-progress--m-sm__description--FontSize	0.875rem
--pf-c-progress--m-sm__description--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-progress	--pf-c-progress--m-sm__measure--FontSize	0.875rem
--pf-c-progress--m-sm__measure--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-progress	--pf-c-progress--m-lg__bar--Height	1.5rem
--pf-c-progress--m-lg__bar--Height --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-progress.pf-m-sm	--pf-c-progress__bar--Height	0.5rem
--pf-c-progress__bar--Height --pf-c-progress--m-sm__bar--Height --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-progress.pf-m-lg	--pf-c-progress__bar--Height	1.5rem
--pf-c-progress__bar--Height --pf-c-progress--m-lg__bar--Height --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-progress.pf-m-success	--pf-c-progress__bar--before--BackgroundColor	#3e8635
--pf-c-progress__bar--before--BackgroundColor --pf-c-progress--m-success__bar--BackgroundColor --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-progress.pf-m-success	--pf-c-progress__status-icon--Color	#3e8635
--pf-c-progress__status-icon--Color --pf-c-progress--m-success__status-icon--Color --pf-global--success-color--100 $pf-global--success-color--100 $pf-color-green-500 #3e8635
	.pf-c-progress.pf-m-success	--pf-c-progress--m-inside__measure--Color	#fff
--pf-c-progress--m-inside__measure--Color --pf-c-progress--m-success--m-inside__measure--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-progress.pf-m-warning	--pf-c-progress__bar--before--BackgroundColor	#f0ab00
--pf-c-progress__bar--before--BackgroundColor --pf-c-progress--m-warning__bar--BackgroundColor --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-progress.pf-m-warning	--pf-c-progress__status-icon--Color	#f0ab00
--pf-c-progress__status-icon--Color --pf-c-progress--m-warning__status-icon--Color --pf-global--warning-color--100 $pf-global--warning-color--100 $pf-color-gold-400 #f0ab00
	.pf-c-progress.pf-m-warning	--pf-c-progress--m-inside__measure--Color	#151515
--pf-c-progress--m-inside__measure--Color --pf-c-progress--m-warning--m-inside__measure--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-progress.pf-m-danger	--pf-c-progress__bar--before--BackgroundColor	#c9190b
--pf-c-progress__bar--before--BackgroundColor --pf-c-progress--m-danger__bar--BackgroundColor --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b
	.pf-c-progress.pf-m-danger	--pf-c-progress__status-icon--Color	#c9190b
--pf-c-progress__status-icon--Color --pf-c-progress--m-danger__status-icon--Color --pf-global--danger-color--100 $pf-global--danger-color--100 $pf-color-red-100 #c9190b

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines