Spinner
A spinner is an animated visual that indicates when a quick action is in progress. For actions that may take a long time, use a progress bar instead.
Installation
We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.
For more information on import maps and how to use them, see the import map reference on MDN Web Docs.
If you are using node and NPM, you can install this component using npm:
npm install @patternfly/elementsThen import this component into your project by using a bare module specifier:
import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';Please Note You should either load elements via a CDN or install them locally through NPM. Do not do both.
Overview
A spinner is an animated visual that indicates when a quick action is in progress.
Installation
npm install @patternfly/elementsUsage
Basic
View HTML Source
<pf-v6-spinner accessible-label="Loading contents">Loading...</pf-v6-spinner>
Size variations
Use the size attribute to set the spinner size to xs, sm, md, lg, or xl.
View HTML Source
<pf-v6-spinner size="xs" accessible-label="Extra small spinner"></pf-v6-spinner>
<pf-v6-spinner size="sm" accessible-label="Small spinner"></pf-v6-spinner>
<pf-v6-spinner size="md" accessible-label="Medium spinner"></pf-v6-spinner>
<pf-v6-spinner size="lg" accessible-label="Large spinner"></pf-v6-spinner>
<pf-v6-spinner size="xl" accessible-label="Extra large spinner"></pf-v6-spinner>
Custom size
Use the --pf-v6-c-spinner--diameter CSS custom property to set a custom size.
View HTML Source
<pf-v6-spinner style="--pf-v6-c-spinner--diameter: 80px;" accessible-label="Custom size spinner"></pf-v6-spinner>
Inline
Set the inline attribute to inherit the font size from surrounding text.
Content is loading
View HTML Source
<p>Content is loading <pf-v6-spinner inline accessible-label="Loading"></pf-v6-spinner></p>
Slots
None
Attributes
size-
Preset sizes for the spinner
- DOM Property
size- Type
-
'xs' | 'sm' | 'md' | 'lg' | 'xl' - Default
-
unknown
inline-
When true, the spinner inherits its font size from the surrounding text, allowing it to display inline with content.
- DOM Property
inline- Type
-
boolean - Default
-
false
accessible-label-
Accessible name for the spinner
- DOM Property
accessibleLabel- Type
-
string - Default
-
unknown
value-text-
Text describing the current progress state
- DOM Property
valueText- Type
-
string - Default
-
unknown
DOM Properties
None
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-v6-c-spinner--Width |
var(--pf-v6-c-spinner--diameter,
var(--pf-t--global--icon--size--2xl, 3.5rem))
|
|
--pf-v6-c-spinner--Height |
var(--pf-v6-c-spinner--diameter,
var(--pf-t--global--icon--size--2xl, 3.5rem))
|
|
--pf-v6-c-spinner--diameter |
Custom diameter of the spinner |
var(--pf-t--global--icon--size--2xl, 3.5rem)
|
--pf-v6-c-spinner--AnimationTimingFunction |
linear
|
|
--pf-v6-c-spinner--Color |
Color of the spinner stroke |
var(--pf-t--global--icon--color--brand--default, #0066cc)
|
--pf-t--global--icon--color--brand--default |
#0066cc
|
|
--pf-v6-c-spinner--AnimationDuration |
Duration of one animation cycle |
1.4s
|
--pf-v6-c-spinner__path--AnimationTimingFunction |
ease-in-out
|
|
--pf-v6-c-spinner--m-xs--diameter |
var(--pf-t--global--icon--size--sm, 0.75rem)
|
|
--pf-t--global--icon--size--sm |
0.75rem
|
|
--pf-v6-c-spinner--m-sm--diameter |
var(--pf-t--global--icon--size--md, 0.875rem)
|
|
--pf-t--global--icon--size--md |
0.875rem
|
|
--pf-v6-c-spinner--m-md--diameter |
var(--pf-t--global--icon--size--lg, 1rem)
|
|
--pf-t--global--icon--size--lg |
1rem
|
|
--pf-v6-c-spinner--m-lg--diameter |
var(--pf-t--global--icon--size--xl, 1.5rem)
|
|
--pf-t--global--icon--size--xl |
1.5rem
|
|
--pf-v6-c-spinner--m-xl--diameter |
var(--pf-t--global--icon--size--2xl, 3.5rem)
|
|
--pf-t--global--icon--size--2xl |
3.5rem
|
|
--pf-v6-c-spinner--m-inline--diameter |
1em
|
|
--pf-v6-c-spinner__path--StrokeWidth |
var(--pf-v6-c-spinner--StrokeWidth, 10)
|
|
--pf-v6-c-spinner--StrokeWidth |
Width of the spinner stroke |
10
|
CSS Shadow Parts
None
