Spinner

Examples

Basic

Size variations

Custom size

Inline size

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.

Second level

Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti.

Sometimes you need small text

Props

Spinner

*required
NameTypeDefaultDescription
aria-labelstringAccessible label to describe what is loading
aria-labelledBystringId of element which describes what is being loaded
aria-valuetextstring'Loading...'Text describing that current loading status or progress
classNamestring''Additional classes added to the Spinner.
diameterstringDiameter of spinner set as CSS variable
isInlinebooleanfalseIndicates the spinner is inline and the size should inherit the text font size. This will override the size prop.
size'sm' | 'md' | 'lg' | 'xl''xl'Size variant of progress.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-spinner--pf-v6-c-spinner--diameter
3.5rem
.pf-v6-c-spinner--pf-v6-c-spinner--Width
1em
.pf-v6-c-spinner--pf-v6-c-spinner--Height
1em
.pf-v6-c-spinner--pf-v6-c-spinner--Color
(In light theme) #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--pf-v6-c-spinner__path--AnimationTimingFunction
ease-in-out
.pf-v6-c-spinner--pf-v6-c-spinner--m-sm--diameter
0.875rem
.pf-v6-c-spinner--pf-v6-c-spinner--m-md--diameter
1rem
.pf-v6-c-spinner--pf-v6-c-spinner--m-lg--diameter
1.5rem
.pf-v6-c-spinner--pf-v6-c-spinner--m-xl--diameter
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.pf-m-sm--pf-v6-c-spinner--diameter
0.875rem
.pf-v6-c-spinner.pf-m-md--pf-v6-c-spinner--diameter
1rem
.pf-v6-c-spinner.pf-m-lg--pf-v6-c-spinner--diameter
1.5rem
.pf-v6-c-spinner.pf-m-xl--pf-v6-c-spinner--diameter
3.5rem