A spinner is used to indicate to users that an action is in progress. For actions that may take a long time, use a progress bar instead.
Name Type Default Description aria-label string Accessible label to describe what is loading aria-labelledBy string Id of element which describes what is being loaded aria-valuetext string 'Loading...' Text describing that current loading status or progress className string '' Additional classes added to the Spinner. diameter string Diameter of spinner set as CSS variable isSVG boolean false Whether to use an SVG (new) rather than a span (old) size 'sm' | 'md' | 'lg' | 'xl' 'xl' Size variant of progress.
.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--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-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 span.pf-c-spinner --pf-c-spinner--AnimationDuration span.pf-c-spinner --pf-c-spinner--AnimationTimingFunction cubic-bezier(.77, .005, .315, 1)
span.pf-c-spinner --pf-c-spinner--stroke-width-multiplier span.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) span.pf-c-spinner --pf-c-spinner__clipper--Width --pf-c-spinner__clipper--Width
--pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl span.pf-c-spinner --pf-c-spinner__clipper--Height --pf-c-spinner__clipper--Height
--pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl span.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 span.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 span.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 span.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) span.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 span.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) span.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) span.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 svg.pf-c-spinner --pf-c-spinner--diameter --pf-c-spinner--diameter
--pf-global--icon--FontSize--xl $pf-global--icon--FontSize--xl svg.pf-c-spinner --pf-c-spinner--AnimationDuration svg.pf-c-spinner --pf-c-spinner--AnimationTimingFunction svg.pf-c-spinner --pf-c-spinner--stroke-width svg.pf-c-spinner --pf-c-spinner__path--Stroke --pf-c-spinner__path--Stroke
--pf-global--primary-color--100 $pf-global--primary-color--100 svg.pf-c-spinner --pf-c-spinner__path--StrokeWidth --pf-c-spinner__path--StrokeWidth
--pf-c-spinner--stroke-width svg.pf-c-spinner --pf-c-spinner__path--AnimationTimingFunction svg.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 svg.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 svg.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 svg.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 svg.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 svg.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 svg.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 svg.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
View source on GitHub Copyright © 2022 Red Hat, Inc.
