Spinner
A spinner is used to indicate to users that an 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-spinner/pf-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 used to indicate to users that an action is in progress.
Installation
npm install @patternfly/elementsUsage
Basic
View HTML Source
<pf-spinner>Loading...</pf-spinner>
View HTML Source
<pf-spinner size="sm">Loading...</pf-spinner>
<pf-spinner size="md">Loading...</pf-spinner>
<pf-spinner size="lg">Loading...</pf-spinner>
<pf-spinner size="xl">Loading...</pf-spinner>
Custom size
View HTML Source
<pf-spinner diameter="80px">Loading...</pf-spinner>
Slots
None
Attributes
size-
Preset sizes for the spinner
- DOM Property
size- Type
-
SpinnerSize - Default
-
'xl'
diameter-
Custom diameter of spinner set as CSS variable
- DOM Property
diameter- Type
-
`${string}${'px' | '%' | 'rem' | 'em' | 'fr' | 'pt'}` | undefined - Default
-
unknown
DOM Properties
None
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-spinner--diameter |
3.375rem |
|
--pf-c-spinner--Width |
3.375rem |
|
--pf-c-spinner--Height |
3.375rem |
|
--pf-c-spinner--Color |
#06c |
|
--pf-c-spinner--m-sm--diameter |
0.625rem |
|
--pf-c-spinner--m-md--diameter |
1.125rem |
|
--pf-c-spinner--m-lg--diameter |
1.5rem |
|
--pf-c-spinner--m-xl--diameter |
3.375rem |
|
--pf-c-spinner--AnimationDuration |
1.4s |
|
--pf-c-spinner--AnimationTimingFunction |
linear |
|
--pf-c-spinner--stroke-width |
10 |
|
--pf-c-spinner__path--Stroke |
#06c |
|
--pf-c-spinner__path--StrokeWidth |
10 |
|
--pf-c-spinner__path--AnimationTimingFunction |
ease-in-out |
CSS Shadow Parts
None
