Spinner

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

Examples

Basic

Sizes

Inline

An inline spinner inherits its font-size, so its size will match the content around it.

Custom size

Documentation

Accessibility

Attribute
Applied to
Outcome
role="progressbar"
.pf-v6-c-spinner
Indicates to assistive technologies that this is an indeterminate progress indicator.
aria-label="Loading..."
.pf-v6-c-spinner
Provides an accessible name for the spinner. Note: one of aria-label or aria-labelledby is required.
aria-labelledby="[id of spinner label]"
.pf-v6-c-spinner
Gives the spinner an accessible name by referring to the element that labels the spinner.
aria-describedby="[id of spinner description]"
.pf-v6-c-spinner
Gives the spinner an accessible description by referring to the element that describes the spinner.

Note: If the spinner is showing that loading of a particular region of a page is in process, the author should use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading.

Note: A live region must be present before changing its status in order for the change to be read.

Usage

Class
Applied to
Outcome
.pf-v6-c-spinner
<svg>
Creates a spinner component. The default is an extra large spinner. Required
.pf-v6-c-spinner__path
<circle>
Creates a spinner circle component. Required
--pf-v6-c-spinner--diameter
.pf-v6-c-spinner
Modifies the value for --pf-v6-c-spinner--diameter declaration.

Modifiers

Class
Applied to
Outcome
.pf-m-sm
.pf-v6-c-spinner
Creates a small spinner.
.pf-m-md
.pf-v6-c-spinner
Creates a medium spinner.
.pf-m-lg
.pf-v6-c-spinner
Creates a large spinner.
.pf-m-xl
.pf-v6-c-spinner
Creates an extra-large spinner.
.pf-m-inline
.pf-v6-c-spinner
Creates an inline spinner.

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner--diameter
3.5rem
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner--Width
1em
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner--Height
1em
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner--Color
(In light theme) #0066cc
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner--AnimationDuration
1.4s
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner--AnimationTimingFunction
linear
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner--StrokeWidth
10
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner__path--StrokeWidth
10
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner__path--AnimationTimingFunction
ease-in-out
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner--m-sm--diameter
0.875rem
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner--m-md--diameter
1rem
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner--m-lg--diameter
1.375rem
:where(:root, .pf-v6-c-spinner)--pf-v6-c-spinner--m-xl--diameter
3.5rem
:where(:root, .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.375rem
.pf-v6-c-spinner.pf-m-xl--pf-v6-c-spinner--diameter
3.5rem
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.