Examples
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
role="progressbar" | .pf-c-spinner | Indicates to assistive technologies that this is an indeterminate progress indicator. |
aria-label="Loading..." | .pf-c-spinner | Provides an accessible name for the spinner. Note: one of aria-label or aria-labelledby is required. |
aria-labelledby="[id of spinner label]" | .pf-c-spinner | Gives the spinner an accessible name by referring to the element that labels the spinner. |
aria-describedby="[id of spinner description]" | .pf-c-spinner | Gives the spinner an accessible description by referring to the element that describes the spinner. |
Note: If the spinner is showing that loading of a particular region of a page is in process, the author should use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading.
Note: A live region must be present before changing its status in order for the change to be read.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-spinner | <svg> | Creates a spinner component. The default is an extra large spinner. Required |
.pf-c-spinner__path | <circle> | Creates a spinner circle component. Required |
--pf-c-spinner--diameter | .pf-c-spinner | Modifies the value for --pf-c-spinner--diameter declaration. |
Usage (legacy)
Class | Applied to | Outcome |
|---|---|---|
.pf-c-spinner | <span> | Creates a spinner component. The default is an extra large spinner. Required |
.pf-c-spinner__clipper | <span> | Creates the spinning line. Required |
.pf-c-spinner__lead-ball | <span> | Rounds out the beginning of the spinning line. Required |
.pf-c-spinner__tail-ball | <span> | Rounds out the end of the spinning line. Required |
Modifiers
Class | Applied to | Outcome |
|---|---|---|
.pf-m-sm | .pf-c-spinner | Creates a small spinner. |
.pf-m-md | .pf-c-spinner | Creates a medium spinner. |
.pf-m-lg | .pf-c-spinner | Creates a large spinner. |
.pf-m-xl | .pf-c-spinner | Creates an extra-large spinner. |
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
