Examples
Props
Spinner
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Accessible label to describe what is loading | |
| aria-labelledBy | string | Id of element which describes what is being loaded | |
| aria-valuetext | string | 'Loading...' | Text describing that current loading status or progress |
| className | string | '' | Additional classes added to the Spinner. |
| diameter | string | Diameter of spinner set as CSS variable | |
| isSVG | boolean | false | Whether to use an SVG (new) rather than a span (old) |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'xl' | Size variant of progress. |
CSS variables
| .pf-c-spinner | --pf-c-spinner--diameter | 3.375rem | |
| .pf-c-spinner | --pf-c-spinner--Width | 3.375rem | |
| .pf-c-spinner | --pf-c-spinner--Height | 3.375rem | |
| .pf-c-spinner | --pf-c-spinner--Color | #06c | |
| .pf-c-spinner | --pf-c-spinner--m-sm--diameter | 0.625rem | |
| .pf-c-spinner | --pf-c-spinner--m-md--diameter | 1.125rem | |
| .pf-c-spinner | --pf-c-spinner--m-lg--diameter | 1.5rem | |
| .pf-c-spinner | --pf-c-spinner--m-xl--diameter | 3.375rem | |
| .pf-c-spinner.pf-m-sm | --pf-c-spinner--diameter | 0.625rem | |
| .pf-c-spinner.pf-m-md | --pf-c-spinner--diameter | 1.125rem | |
| .pf-c-spinner.pf-m-lg | --pf-c-spinner--diameter | 1.5rem | |
| .pf-c-spinner.pf-m-xl | --pf-c-spinner--diameter | 3.375rem | |
| span.pf-c-spinner | --pf-c-spinner--AnimationDuration | 1.5s | |
| span.pf-c-spinner | --pf-c-spinner--AnimationTimingFunction | cubic-bezier(.77, .005, .315, 1) | |
| span.pf-c-spinner | --pf-c-spinner--stroke-width-multiplier | .1 | |
| span.pf-c-spinner | --pf-c-spinner--stroke-width | calc(3.375rem * .1) | |
| span.pf-c-spinner | --pf-c-spinner__clipper--Width | 3.375rem | |
| span.pf-c-spinner | --pf-c-spinner__clipper--Height | 3.375rem | |
| span.pf-c-spinner | --pf-c-spinner__clipper--after--BoxShadowColor | #06c | |
| span.pf-c-spinner | --pf-c-spinner__clipper--after--Width | 3.375rem | |
| span.pf-c-spinner | --pf-c-spinner__clipper--after--Height | 3.375rem | |
| span.pf-c-spinner | --pf-c-spinner__clipper--after--BoxShadowSpreadRadius | calc(3.375rem * .1) | |
| span.pf-c-spinner | --pf-c-spinner__lead-ball--after--BackgroundColor | #06c | |
| span.pf-c-spinner | --pf-c-spinner__ball--after--Width | calc(3.375rem * .1) | |
| span.pf-c-spinner | --pf-c-spinner__ball--after--Height | calc(3.375rem * .1) | |
| span.pf-c-spinner | --pf-c-spinner__tail-ball--after--BackgroundColor | #06c | |
| svg.pf-c-spinner | --pf-c-spinner--diameter | 3.375rem | |
| svg.pf-c-spinner | --pf-c-spinner--AnimationDuration | 1.4s | |
| svg.pf-c-spinner | --pf-c-spinner--AnimationTimingFunction | linear | |
| svg.pf-c-spinner | --pf-c-spinner--stroke-width | 10 | |
| svg.pf-c-spinner | --pf-c-spinner__path--Stroke | #06c | |
| svg.pf-c-spinner | --pf-c-spinner__path--StrokeWidth | 10 | |
| svg.pf-c-spinner | --pf-c-spinner__path--AnimationTimingFunction | ease-in-out | |
| svg.pf-c-spinner | --pf-c-spinner--m-sm--diameter | 0.625rem | |
| svg.pf-c-spinner | --pf-c-spinner--m-md--diameter | 1.125rem | |
| svg.pf-c-spinner | --pf-c-spinner--m-lg--diameter | 1.5rem | |
| svg.pf-c-spinner | --pf-c-spinner--m-xl--diameter | 3.375rem | |
| svg.pf-c-spinner.pf-m-sm | --pf-c-spinner--diameter | 0.625rem | |
| svg.pf-c-spinner.pf-m-md | --pf-c-spinner--diameter | 1.125rem | |
| svg.pf-c-spinner.pf-m-lg | --pf-c-spinner--diameter | 1.5rem | |
| svg.pf-c-spinner.pf-m-xl | --pf-c-spinner--diameter | 3.375rem | |
View source on GitHub
