Skip to content
Patternfly Logo

Spinner

Examples

Basic

Size variations

Custom size

Props

Spinner

NameTypeRequiredDefaultDescription
aria-valuetextstringNo'Loading...'Aria value text
classNamestringNo''Additional classes added to the Spinner.
diameterstringNoDiameter of spinner set as CSS variable
isSVGbooleanNofalseWhether to use an SVG (new) rather than a span (old)
size'sm' | 'md' | 'lg' | 'xl'No'xl'Size variant of progress.

CSS variables

.pf-c-spinner--pf-c-spinner--diameter
3.375rem
.pf-c-spinner--pf-c-spinner--Width
3.375rem
.pf-c-spinner--pf-c-spinner--Height
3.375rem
.pf-c-spinner--pf-c-spinner--Color
#06c
.pf-c-spinner--pf-c-spinner--m-sm--diameter
0.625rem
.pf-c-spinner--pf-c-spinner--m-md--diameter
1.125rem
.pf-c-spinner--pf-c-spinner--m-lg--diameter
1.5rem
.pf-c-spinner--pf-c-spinner--m-xl--diameter
3.375rem
.pf-c-spinner.pf-m-sm--pf-c-spinner--diameter
0.625rem
.pf-c-spinner.pf-m-md--pf-c-spinner--diameter
1.125rem
.pf-c-spinner.pf-m-lg--pf-c-spinner--diameter
1.5rem
.pf-c-spinner.pf-m-xl--pf-c-spinner--diameter
3.375rem
span.pf-c-spinner--pf-c-spinner--AnimationDuration
1.5s
span.pf-c-spinner--pf-c-spinner--AnimationTimingFunction
cubic-bezier(.77, .005, .315, 1)
span.pf-c-spinner--pf-c-spinner--stroke-width-multiplier
.1
span.pf-c-spinner--pf-c-spinner--stroke-width
calc(3.375rem * .1)
span.pf-c-spinner--pf-c-spinner__clipper--Width
3.375rem
span.pf-c-spinner--pf-c-spinner__clipper--Height
3.375rem
span.pf-c-spinner--pf-c-spinner__clipper--after--BoxShadowColor
#06c
span.pf-c-spinner--pf-c-spinner__clipper--after--Width
3.375rem
span.pf-c-spinner--pf-c-spinner__clipper--after--Height
3.375rem
span.pf-c-spinner--pf-c-spinner__clipper--after--BoxShadowSpreadRadius
calc(3.375rem * .1)
span.pf-c-spinner--pf-c-spinner__lead-ball--after--BackgroundColor
#06c
span.pf-c-spinner--pf-c-spinner__ball--after--Width
calc(3.375rem * .1)
span.pf-c-spinner--pf-c-spinner__ball--after--Height
calc(3.375rem * .1)
span.pf-c-spinner--pf-c-spinner__tail-ball--after--BackgroundColor
#06c
svg.pf-c-spinner--pf-c-spinner--diameter
3.375rem
svg.pf-c-spinner--pf-c-spinner--AnimationDuration
1.4s
svg.pf-c-spinner--pf-c-spinner--AnimationTimingFunction
linear
svg.pf-c-spinner--pf-c-spinner--stroke-width
10
svg.pf-c-spinner--pf-c-spinner__path--Stroke
#06c
svg.pf-c-spinner--pf-c-spinner__path--StrokeWidth
10
svg.pf-c-spinner--pf-c-spinner__path--AnimationTimingFunction
ease-in-out
svg.pf-c-spinner--pf-c-spinner--m-sm--diameter
0.625rem
svg.pf-c-spinner--pf-c-spinner--m-md--diameter
1.125rem
svg.pf-c-spinner--pf-c-spinner--m-lg--diameter
1.5rem
svg.pf-c-spinner--pf-c-spinner--m-xl--diameter
3.375rem
svg.pf-c-spinner.pf-m-sm--pf-c-spinner--diameter
0.625rem
svg.pf-c-spinner.pf-m-md--pf-c-spinner--diameter
1.125rem
svg.pf-c-spinner.pf-m-lg--pf-c-spinner--diameter
1.5rem
svg.pf-c-spinner.pf-m-xl--pf-c-spinner--diameter
3.375rem

View source on GitHub