Progress

A progress component is a horizontal bar that indicates the completion status of an ongoing process or task.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-progress	--pf-v6-c-progress--GridGap	1rem
--pf-v6-c-progress--GridGap --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-progress	--pf-v6-c-progress__bar--Height	1rem
--pf-v6-c-progress__bar--Height --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-progress	--pf-v6-c-progress__bar--BackgroundColor	(In light theme) #e0e0e0
--pf-v6-c-progress__bar--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-progress	--pf-v6-c-progress__bar--BorderRadius	999px
--pf-v6-c-progress__bar--BorderRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-progress	--pf-v6-c-progress__bar--BorderColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-progress__bar--BorderColor --pf-t--global--border--color--high-contrast rgb(255, 255, 255, 0.0000)
	.pf-v6-c-progress	--pf-v6-c-progress__bar--BorderWidth	0px
--pf-v6-c-progress__bar--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-progress	--pf-v6-c-progress__measure--m-static-width--MinWidth	4.5ch
	.pf-v6-c-progress	--pf-v6-c-progress__status--Gap	0.5rem
--pf-v6-c-progress__status--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-progress	--pf-v6-c-progress__status-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-progress__status-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-progress	--pf-v6-c-progress__indicator--Height	1rem
--pf-v6-c-progress__indicator--Height --pf-v6-c-progress__bar--Height --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-progress	--pf-v6-c-progress__indicator--BackgroundColor	(In light theme) #0066cc
--pf-v6-c-progress__indicator--BackgroundColor --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-progress	--pf-v6-c-progress__indicator--BorderWidth	0px
--pf-v6-c-progress__indicator--BorderWidth --pf-t--global--border--width--high-contrast--extra-strong 0px
	.pf-v6-c-progress	--pf-v6-c-progress__indicator--BorderColor	transparent
	.pf-v6-c-progress	--pf-v6-c-progress__indicator--BorderRadius	999px
--pf-v6-c-progress__indicator--BorderRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-progress	--pf-v6-c-progress__helper-text--MarginBlockStart	calc(0.5rem - 1rem)
--pf-v6-c-progress__helper-text--MarginBlockStart calc(--pf-t--global--spacer--sm - --pf-v6-c-progress--GridGap) calc(--pf-t--global--spacer--200 - --pf-t--global--spacer--md) calc(0.5rem - --pf-t--global--spacer--300) calc(0.5rem - 1rem)
	.pf-v6-c-progress	--pf-v6-c-progress--m-success__indicator--BackgroundColor	(In light theme) #3d7317
--pf-v6-c-progress--m-success__indicator--BackgroundColor --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-progress	--pf-v6-c-progress--m-warning__indicator--BackgroundColor	(In light theme) #ffcc17
--pf-v6-c-progress--m-warning__indicator--BackgroundColor --pf-t--global--color--status--warning--default --pf-t--global--color--status--warning--100 --pf-t--color--yellow--30 #ffcc17
	.pf-v6-c-progress	--pf-v6-c-progress--m-danger__indicator--BackgroundColor	(In light theme) #b1380b
--pf-v6-c-progress--m-danger__indicator--BackgroundColor --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-progress	--pf-v6-c-progress--m-success__status-icon--Color	(In light theme) #3d7317
--pf-v6-c-progress--m-success__status-icon--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-progress	--pf-v6-c-progress--m-warning__status-icon--Color	(In light theme) #dca614
--pf-v6-c-progress--m-warning__status-icon--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-progress	--pf-v6-c-progress--m-danger__status-icon--Color	(In light theme) #b1380b
--pf-v6-c-progress--m-danger__status-icon--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-progress	--pf-v6-c-progress--m-inside__indicator--MinWidth	2rem
--pf-v6-c-progress--m-inside__indicator--MinWidth --pf-t--global--spacer--xl --pf-t--global--spacer--500 2rem
	.pf-v6-c-progress	--pf-v6-c-progress--m-inside__measure--Color	(In light theme) #ffffff
--pf-v6-c-progress--m-inside__measure--Color --pf-t--global--text--color--on-brand--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-progress	--pf-v6-c-progress--m-success--m-inside__measure--Color	(In light theme) #ffffff
--pf-v6-c-progress--m-success--m-inside__measure--Color --pf-t--global--text--color--status--on-success--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-progress	--pf-v6-c-progress--m-warning--m-inside__measure--Color	(In light theme) #151515
--pf-v6-c-progress--m-warning--m-inside__measure--Color --pf-t--global--text--color--status--on-warning--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-progress	--pf-v6-c-progress--m-danger--m-inside__measure--Color	(In light theme) #ffffff
--pf-v6-c-progress--m-danger--m-inside__measure--Color --pf-t--global--text--color--status--on-danger--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-progress	--pf-v6-c-progress--m-inside__measure--FontSize	0.875rem
--pf-v6-c-progress--m-inside__measure--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-progress	--pf-v6-c-progress--m-outside__measure--FontSize	0.875rem
--pf-v6-c-progress--m-outside__measure--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-progress	--pf-v6-c-progress--m-sm__bar--Height	0.5rem
--pf-v6-c-progress--m-sm__bar--Height --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-progress	--pf-v6-c-progress--m-sm__measure--FontSize	0.75rem
--pf-v6-c-progress--m-sm__measure--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	.pf-v6-c-progress	--pf-v6-c-progress--m-lg__bar--Height	1.5rem
--pf-v6-c-progress--m-lg__bar--Height --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-progress.pf-m-sm	--pf-v6-c-progress__bar--Height	0.5rem
--pf-v6-c-progress__bar--Height --pf-v6-c-progress--m-sm__bar--Height --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-progress.pf-m-lg	--pf-v6-c-progress__bar--Height	1.5rem
--pf-v6-c-progress__bar--Height --pf-v6-c-progress--m-lg__bar--Height --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	.pf-v6-c-progress.pf-m-success	--pf-v6-c-progress__indicator--BackgroundColor	(In light theme) #3d7317
--pf-v6-c-progress__indicator--BackgroundColor --pf-v6-c-progress--m-success__indicator--BackgroundColor --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-progress.pf-m-success	--pf-v6-c-progress__status-icon--Color	(In light theme) #3d7317
--pf-v6-c-progress__status-icon--Color --pf-v6-c-progress--m-success__status-icon--Color --pf-t--global--icon--color--status--success--default --pf-t--global--color--status--success--default --pf-t--global--color--status--success--100 --pf-t--color--green--60 #3d7317
	.pf-v6-c-progress.pf-m-success	--pf-v6-c-progress--m-inside__measure--Color	(In light theme) #ffffff
--pf-v6-c-progress--m-inside__measure--Color --pf-v6-c-progress--m-success--m-inside__measure--Color --pf-t--global--text--color--status--on-success--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-progress.pf-m-warning	--pf-v6-c-progress__indicator--BackgroundColor	(In light theme) #ffcc17
--pf-v6-c-progress__indicator--BackgroundColor --pf-v6-c-progress--m-warning__indicator--BackgroundColor --pf-t--global--color--status--warning--default --pf-t--global--color--status--warning--100 --pf-t--color--yellow--30 #ffcc17
	.pf-v6-c-progress.pf-m-warning	--pf-v6-c-progress__status-icon--Color	(In light theme) #dca614
--pf-v6-c-progress__status-icon--Color --pf-v6-c-progress--m-warning__status-icon--Color --pf-t--global--icon--color--status--warning--default --pf-t--global--color--status--warning--200 --pf-t--color--yellow--40 #dca614
	.pf-v6-c-progress.pf-m-warning	--pf-v6-c-progress--m-inside__measure--Color	(In light theme) #151515
--pf-v6-c-progress--m-inside__measure--Color --pf-v6-c-progress--m-warning--m-inside__measure--Color --pf-t--global--text--color--status--on-warning--default --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-progress.pf-m-danger	--pf-v6-c-progress__indicator--BackgroundColor	(In light theme) #b1380b
--pf-v6-c-progress__indicator--BackgroundColor --pf-v6-c-progress--m-danger__indicator--BackgroundColor --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-progress.pf-m-danger	--pf-v6-c-progress__status-icon--Color	(In light theme) #b1380b
--pf-v6-c-progress__status-icon--Color --pf-v6-c-progress--m-danger__status-icon--Color --pf-t--global--icon--color--status--danger--default --pf-t--global--color--status--danger--default --pf-t--global--color--status--danger--100 --pf-t--color--red-orange--60 #b1380b
	.pf-v6-c-progress.pf-m-danger	--pf-v6-c-progress--m-inside__measure--Color	(In light theme) #ffffff
--pf-v6-c-progress--m-inside__measure--Color --pf-v6-c-progress--m-danger--m-inside__measure--Color --pf-t--global--text--color--status--on-danger--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon	--pf-v6-c-progress--TransitionDuration--Opacity	200ms
--pf-v6-c-progress--TransitionDuration--Opacity --pf-t--global--motion--duration--fade--default --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon	--pf-v6-c-progress--TransitionTimingFunction--Opacity	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-progress--TransitionTimingFunction--Opacity --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)