Spinner
A spinner provides an animated indicator for in-progress actions.
Authors SHOULD set accessible-label when the default "Loading..." is
insufficient. For long-running operations, use a progress bar instead.
Respects prefers-reduced-motion by disabling animation.
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--diameter |
Spinner diameter (overrides |
var(--pf-t--global--icon--size--2xl, 3.5rem)
|
--pf-v6-c-spinner--Width |
Spinner width |
var(--pf-v6-c-spinner--diameter,
/** Default spinner size */
var(--pf-t--global--icon--size--2xl, 3.5rem))
|
--pf-v6-c-spinner--Height |
Spinner height |
var(--pf-v6-c-spinner--diameter,
var(--pf-t--global--icon--size--2xl, 3.5rem))
|
--pf-v6-c-spinner--Color |
Spinner stroke color |
var(--pf-t--global--icon--color--brand--default, #0066cc)
|
--pf-v6-c-spinner--StrokeWidth |
Spinner stroke width |
—
|
--pf-v6-c-spinner--AnimationDuration |
Duration of one animation cycle |
1.4s
|
--pf-v6-c-spinner--AnimationTimingFunction |
Animation timing function for rotation |
linear
|
--pf-v6-c-spinner__path--AnimationTimingFunction |
Animation timing function for dash |
ease-in-out
|
--pf-v6-c-spinner--m-xs--diameter |
Diameter when size is xs |
var(--pf-t--global--icon--size--sm, 0.75rem)
|
--pf-v6-c-spinner--m-sm--diameter |
Diameter when size is sm |
var(--pf-t--global--icon--size--md, 0.875rem)
|
--pf-v6-c-spinner--m-md--diameter |
Diameter when size is md |
var(--pf-t--global--icon--size--lg, 1rem)
|
--pf-v6-c-spinner--m-lg--diameter |
Diameter when size is lg |
—
|
--pf-v6-c-spinner--m-xl--diameter |
Diameter when size is xl |
—
|
--pf-v6-c-spinner--m-inline--diameter |
Diameter when inline (defaults to 1em) |
—
|
--pf-t--global--icon--color--brand--default |
Brand color for spinner stroke |
#0066cc
|
--pf-t--global--icon--size--sm |
Extra-small icon size for compact spinners |
0.75rem
|
--pf-t--global--icon--size--md |
Small icon size |
0.875rem
|
--pf-t--global--icon--size--lg |
Medium icon size |
1rem
|
--pf-t--global--icon--size--xl |
Large icon size |
1.5rem
|
--pf-t--global--icon--size--2xl |
Default spinner size Extra-large icon size, default spinner diameter |
3.5rem
|
--pf-v6-c-spinner__path--StrokeWidth |
Stroke width during mid-animation thin phase |
var(--pf-v6-c-spinner--StrokeWidth, 10)
|
CSS Shadow Parts
None
