Spinner
Overview
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.
A spinner is used to indicate to users that an action is in progress.
Installation
npm install @patternfly/elementsUsage
Basic
<pf-spinner>Loading...</pf-spinner>Size variations
<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
<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
