HTML
Spinner
ExamplesDocumentationCSS VariablesExamples
Documentation
Accessibility
| Attribute | Applied to | Outcome |
|---|---|---|
role="progressbar" | .pf-c-spinner | Indicates to assistive technologies that this is an indeterminate progress indicator. |
aria-valuetext="Loading..." | .pf-c-spinner | Describes content that is being loaded, while it is loading. |
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. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
Usage
| 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 |
.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__ball--after--Height | c_spinner__ball_after_Height | calc(var(--pf-global--icon--FontSize--xl) * .1) |
| --pf-c-spinner__ball--after--Width | c_spinner__ball_after_Width | calc(var(--pf-global--icon--FontSize--xl) * .1) |
| --pf-c-spinner__clipper--after--BoxShadowColor | c_spinner__clipper_after_BoxShadowColor | var(--pf-global--primary-color--dark-100) |
| --pf-c-spinner__clipper--after--BoxShadowSpreadRadius | c_spinner__clipper_after_BoxShadowSpreadRadius | calc(var(--pf-global--icon--FontSize--xl) * .1) |
| --pf-c-spinner__clipper--after--Height | c_spinner__clipper_after_Height | var(--pf-global--icon--FontSize--xl) |
| --pf-c-spinner__clipper--after--Width | c_spinner__clipper_after_Width | var(--pf-global--icon--FontSize--xl) |
| --pf-c-spinner__clipper--Height | c_spinner__clipper_Height | var(--pf-global--icon--FontSize--xl) |
| --pf-c-spinner__clipper--Width | c_spinner__clipper_Width | var(--pf-global--icon--FontSize--xl) |
| --pf-c-spinner__lead-ball--after--BackgroundColor | c_spinner__lead_ball_after_BackgroundColor | var(--pf-global--primary-color--dark-100) |
| --pf-c-spinner__tail-ball--after--BackgroundColor | c_spinner__tail_ball_after_BackgroundColor | var(--pf-global--primary-color--dark-100) |
| --pf-c-spinner--AnimationDuration | c_spinner_AnimationDuration | 1.5s |
| --pf-c-spinner--AnimationTimingFunction | c_spinner_AnimationTimingFunction | cubic-bezier(.77, .005, .315, 1) |
| --pf-c-spinner--Color | c_spinner_Color | var(--pf-global--primary-color--dark-100) |
| --pf-c-spinner--diameter | c_spinner_diameter | var(--pf-global--icon--FontSize--xl) |
| --pf-c-spinner--Height | c_spinner_Height | var(--pf-global--icon--FontSize--xl) |
| --pf-c-spinner--m-lg--diameter | c_spinner_m_lg_diameter | var(--pf-global--icon--FontSize--lg) |
| --pf-c-spinner--m-md--diameter | c_spinner_m_md_diameter | var(--pf-global--icon--FontSize--md) |
| --pf-c-spinner--m-sm--diameter | c_spinner_m_sm_diameter | var(--pf-global--icon--FontSize--sm) |
| --pf-c-spinner--m-xl--diameter | c_spinner_m_xl_diameter | var(--pf-global--icon--FontSize--xl) |
| --pf-c-spinner--stroke-width | c_spinner_stroke_width | calc(var(--pf-global--icon--FontSize--xl) * .1) |
| --pf-c-spinner--stroke-width-multiplier | c_spinner_stroke_width_multiplier | .1 |
| --pf-c-spinner--Width | c_spinner_Width | var(--pf-global--icon--FontSize--xl) |
