Spinner

A spinner is an animated visual that indicates when a quick action is in progress.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-spinner	--pf-v6-c-spinner--diameter	3.5rem
--pf-v6-c-spinner--diameter --pf-t--global--icon--size--2xl --pf-t--global--icon--size--400 3.5rem
	.pf-v6-c-spinner	--pf-v6-c-spinner--Width	1em
--pf-v6-c-spinner--Width --pf-v6-c-spinner--diameter 1em
	.pf-v6-c-spinner	--pf-v6-c-spinner--Height	1em
--pf-v6-c-spinner--Height --pf-v6-c-spinner--diameter 1em
	.pf-v6-c-spinner	--pf-v6-c-spinner--Color	(In light theme) #0066cc
--pf-v6-c-spinner--Color --pf-t--global--icon--color--brand--default --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-spinner	--pf-v6-c-spinner--AnimationDuration	1.4s
	.pf-v6-c-spinner	--pf-v6-c-spinner--AnimationTimingFunction	linear
	.pf-v6-c-spinner	--pf-v6-c-spinner--StrokeWidth	10
	.pf-v6-c-spinner	--pf-v6-c-spinner__path--StrokeWidth	10
--pf-v6-c-spinner__path--StrokeWidth --pf-v6-c-spinner--StrokeWidth 10
	.pf-v6-c-spinner	--pf-v6-c-spinner__path--AnimationTimingFunction	ease-in-out
	.pf-v6-c-spinner	--pf-v6-c-spinner--m-xs--diameter	0.75rem
--pf-v6-c-spinner--m-xs--diameter --pf-t--global--icon--size--sm --pf-t--global--icon--size--100 0.75rem
	.pf-v6-c-spinner	--pf-v6-c-spinner--m-sm--diameter	0.875rem
--pf-v6-c-spinner--m-sm--diameter --pf-t--global--icon--size--md --pf-t--global--icon--size--200 0.875rem
	.pf-v6-c-spinner	--pf-v6-c-spinner--m-md--diameter	1rem
--pf-v6-c-spinner--m-md--diameter --pf-t--global--icon--size--lg --pf-t--global--icon--size--250 1rem
	.pf-v6-c-spinner	--pf-v6-c-spinner--m-lg--diameter	1.5rem
--pf-v6-c-spinner--m-lg--diameter --pf-t--global--icon--size--xl --pf-t--global--icon--size--300 1.5rem
	.pf-v6-c-spinner	--pf-v6-c-spinner--m-xl--diameter	3.5rem
--pf-v6-c-spinner--m-xl--diameter --pf-t--global--icon--size--2xl --pf-t--global--icon--size--400 3.5rem
	.pf-v6-c-spinner	--pf-v6-c-spinner--m-inline--diameter	1em
	.pf-v6-c-spinner.pf-m-inline	--pf-v6-c-spinner--diameter	1em
--pf-v6-c-spinner--diameter --pf-v6-c-spinner--m-inline--diameter 1em
	.pf-v6-c-spinner.pf-m-xs	--pf-v6-c-spinner--diameter	0.75rem
--pf-v6-c-spinner--diameter --pf-v6-c-spinner--m-xs--diameter --pf-t--global--icon--size--sm --pf-t--global--icon--size--100 0.75rem
	.pf-v6-c-spinner.pf-m-xs	--pf-v6-c-spinner--StrokeWidth	15
	.pf-v6-c-spinner.pf-m-sm	--pf-v6-c-spinner--diameter	0.875rem
--pf-v6-c-spinner--diameter --pf-v6-c-spinner--m-sm--diameter --pf-t--global--icon--size--md --pf-t--global--icon--size--200 0.875rem
	.pf-v6-c-spinner.pf-m-md	--pf-v6-c-spinner--diameter	1rem
--pf-v6-c-spinner--diameter --pf-v6-c-spinner--m-md--diameter --pf-t--global--icon--size--lg --pf-t--global--icon--size--250 1rem
	.pf-v6-c-spinner.pf-m-lg	--pf-v6-c-spinner--diameter	1.5rem
--pf-v6-c-spinner--diameter --pf-v6-c-spinner--m-lg--diameter --pf-t--global--icon--size--xl --pf-t--global--icon--size--300 1.5rem
	.pf-v6-c-spinner.pf-m-xl	--pf-v6-c-spinner--diameter	3.5rem
--pf-v6-c-spinner--diameter --pf-v6-c-spinner--m-xl--diameter --pf-t--global--icon--size--2xl --pf-t--global--icon--size--400 3.5rem
	.pf-v6-m-no-motion .pf-v6-c-spinner	--pf-v6-c-spinner--AnimationDuration	0s