React Spinner Spinners are used to indicate to users that an action is in progress. For actions that may take a long time use a Progress Bar in place of a Spinner. Related design guidelines: Data loading
Spinner Examples Props CSS Variables Spinner properties Name Type Required Default Description className string No '' Additional classes added to the Spinner. size 'sm' | 'md' | 'lg' | 'xl' No 'xl' Size variant of progress. aria-valuetext string No 'Loading...' Aria value text
Selector Variable React Token Value .pf-c-spinner --pf-c-spinner--AnimationDuration .pf-c-spinner --pf-c-spinner--AnimationTimingFunction cubic-bezier(.77, .005, .315, 1)
.pf-c-spinner --pf-c-spinner--diameter --pf-c-spinner--diameter
--pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl .pf-c-spinner --pf-c-spinner--stroke-width-multiplier .pf-c-spinner --pf-c-spinner--stroke-width --pf-c-spinner--stroke-width
calc(--pf-c-spinner--diameter * --pf-c-spinner--stroke-width-multiplier) calc(--pf-global--icon--FontSize--xl * .1) calc($pf-global--icon--FontSize--xl * .1) calc(pf-font-prem(54px) * .1) .pf-c-spinner --pf-c-spinner--Width --pf-c-spinner--Width
--pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl .pf-c-spinner --pf-c-spinner--Height --pf-c-spinner--Height
--pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl .pf-c-spinner --pf-c-spinner--Color --pf-c-spinner--Color
--pf-global--primary-color--100 $pf-global--primary-color--100 .pf-c-spinner --pf-c-spinner--m-sm--diameter --pf-c-spinner--m-sm--diameter
--pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm .pf-c-spinner --pf-c-spinner--m-md--diameter --pf-c-spinner--m-md--diameter
--pf-global--icon--FontSize--md $pf-global--icon--FontSize--md .pf-c-spinner --pf-c-spinner--m-lg--diameter --pf-c-spinner--m-lg--diameter
--pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg .pf-c-spinner --pf-c-spinner--m-xl--diameter --pf-c-spinner--m-xl--diameter
--pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl .pf-c-spinner --pf-c-spinner__clipper--Width --pf-c-spinner__clipper--Width
--pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl .pf-c-spinner --pf-c-spinner__clipper--Height --pf-c-spinner__clipper--Height
--pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl .pf-c-spinner --pf-c-spinner__clipper--after--BoxShadowColor --pf-c-spinner__clipper--after--BoxShadowColor
--pf-global--primary-color--100 $pf-global--primary-color--100 .pf-c-spinner --pf-c-spinner__clipper--after--Width --pf-c-spinner__clipper--after--Width
--pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl .pf-c-spinner --pf-c-spinner__clipper--after--Height --pf-c-spinner__clipper--after--Height
--pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl .pf-c-spinner --pf-c-spinner__clipper--after--BoxShadowSpreadRadius --pf-c-spinner__clipper--after--BoxShadowSpreadRadius
--pf-c-spinner--stroke-width calc(--pf-c-spinner--diameter * --pf-c-spinner--stroke-width-multiplier) calc(--pf-global--icon--FontSize--xl * .1) calc($pf-global--icon--FontSize--xl * .1) calc(pf-font-prem(54px) * .1) .pf-c-spinner --pf-c-spinner__lead-ball--after--BackgroundColor --pf-c-spinner__lead-ball--after--BackgroundColor
--pf-global--primary-color--100 $pf-global--primary-color--100 .pf-c-spinner --pf-c-spinner__ball--after--Width --pf-c-spinner__ball--after--Width
--pf-c-spinner--stroke-width calc(--pf-c-spinner--diameter * --pf-c-spinner--stroke-width-multiplier) calc(--pf-global--icon--FontSize--xl * .1) calc($pf-global--icon--FontSize--xl * .1) calc(pf-font-prem(54px) * .1) .pf-c-spinner --pf-c-spinner__ball--after--Height --pf-c-spinner__ball--after--Height
--pf-c-spinner--stroke-width calc(--pf-c-spinner--diameter * --pf-c-spinner--stroke-width-multiplier) calc(--pf-global--icon--FontSize--xl * .1) calc($pf-global--icon--FontSize--xl * .1) calc(pf-font-prem(54px) * .1) .pf-c-spinner --pf-c-spinner__tail-ball--after--BackgroundColor --pf-c-spinner__tail-ball--after--BackgroundColor
--pf-global--primary-color--100 $pf-global--primary-color--100 .pf-c-spinner.pf-m-sm --pf-c-spinner--diameter --pf-c-spinner--diameter
--pf-c-spinner--m-sm--diameter --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm .pf-c-spinner.pf-m-md --pf-c-spinner--diameter --pf-c-spinner--diameter
--pf-c-spinner--m-md--diameter --pf-global--icon--FontSize--md $pf-global--icon--FontSize--md .pf-c-spinner.pf-m-lg --pf-c-spinner--diameter --pf-c-spinner--diameter
--pf-c-spinner--m-lg--diameter --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg .pf-c-spinner.pf-m-xl --pf-c-spinner--diameter --pf-c-spinner--diameter
--pf-c-spinner--m-xl--diameter --pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl
