Examples
Inline size
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.
Second level
Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti.
Sometimes you need small textProps
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 | |
| isInlineBeta | boolean | false | Indicates the spinner is inline and the size should inherit the text font size. This will override the size prop. |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'xl' | Size variant of progress. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-spinner | --pf-v5-c-spinner--diameter | 3.375rem | ||
--pf-v5-c-spinner--diameter --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| .pf-v5-c-spinner | --pf-v5-c-spinner--Width | 3.375rem | ||
--pf-v5-c-spinner--Width --pf-v5-c-spinner--diameter --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| .pf-v5-c-spinner | --pf-v5-c-spinner--Height | 3.375rem | ||
--pf-v5-c-spinner--Height --pf-v5-c-spinner--diameter --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| .pf-v5-c-spinner | --pf-v5-c-spinner--Color | #06c | ||
--pf-v5-c-spinner--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-spinner | --pf-v5-c-spinner--m-sm--diameter | 0.75rem | ||
--pf-v5-c-spinner--m-sm--diameter --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-spinner | --pf-v5-c-spinner--m-md--diameter | 1rem | ||
--pf-v5-c-spinner--m-md--diameter --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-spinner | --pf-v5-c-spinner--m-lg--diameter | 1.5rem | ||
--pf-v5-c-spinner--m-lg--diameter --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-spinner | --pf-v5-c-spinner--m-xl--diameter | 3.375rem | ||
--pf-v5-c-spinner--m-xl--diameter --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| .pf-v5-c-spinner | --pf-v5-c-spinner--m-inline--diameter | 1em | ||
| .pf-v5-c-spinner.pf-m-inline | --pf-v5-c-spinner--diameter | 1em | ||
--pf-v5-c-spinner--diameter --pf-v5-c-spinner--m-inline--diameter 1em | ||||
| .pf-v5-c-spinner.pf-m-sm | --pf-v5-c-spinner--diameter | 0.75rem | ||
--pf-v5-c-spinner--diameter --pf-v5-c-spinner--m-sm--diameter --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-spinner.pf-m-md | --pf-v5-c-spinner--diameter | 1rem | ||
--pf-v5-c-spinner--diameter --pf-v5-c-spinner--m-md--diameter --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-spinner.pf-m-lg | --pf-v5-c-spinner--diameter | 1.5rem | ||
--pf-v5-c-spinner--diameter --pf-v5-c-spinner--m-lg--diameter --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| .pf-v5-c-spinner.pf-m-xl | --pf-v5-c-spinner--diameter | 3.375rem | ||
--pf-v5-c-spinner--diameter --pf-v5-c-spinner--m-xl--diameter --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| svg.pf-v5-c-spinner | --pf-v5-c-spinner--diameter | 3.375rem | ||
--pf-v5-c-spinner--diameter --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| svg.pf-v5-c-spinner | --pf-v5-c-spinner--AnimationDuration | 1.4s | ||
| svg.pf-v5-c-spinner | --pf-v5-c-spinner--AnimationTimingFunction | linear | ||
| svg.pf-v5-c-spinner | --pf-v5-c-spinner--stroke-width | 10 | ||
| svg.pf-v5-c-spinner | --pf-v5-c-spinner__path--Stroke | #06c | ||
--pf-v5-c-spinner__path--Stroke --pf-v5-c-spinner--Color --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| svg.pf-v5-c-spinner | --pf-v5-c-spinner__path--StrokeWidth | 10 | ||
--pf-v5-c-spinner__path--StrokeWidth --pf-v5-c-spinner--stroke-width 10 | ||||
| svg.pf-v5-c-spinner | --pf-v5-c-spinner__path--AnimationTimingFunction | ease-in-out | ||
| svg.pf-v5-c-spinner | --pf-v5-c-spinner--m-sm--diameter | 0.75rem | ||
--pf-v5-c-spinner--m-sm--diameter --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| svg.pf-v5-c-spinner | --pf-v5-c-spinner--m-md--diameter | 1rem | ||
--pf-v5-c-spinner--m-md--diameter --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
| svg.pf-v5-c-spinner | --pf-v5-c-spinner--m-lg--diameter | 1.5rem | ||
--pf-v5-c-spinner--m-lg--diameter --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| svg.pf-v5-c-spinner | --pf-v5-c-spinner--m-xl--diameter | 3.375rem | ||
--pf-v5-c-spinner--m-xl--diameter --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
| svg.pf-v5-c-spinner.pf-m-sm | --pf-v5-c-spinner--diameter | 0.75rem | ||
--pf-v5-c-spinner--diameter --pf-v5-c-spinner--m-sm--diameter --pf-v5-global--icon--FontSize--sm $pf-v5-global--icon--FontSize--sm pf-font-prem(12px) 0.75rem | ||||
| svg.pf-v5-c-spinner.pf-m-md | --pf-v5-c-spinner--diameter | 1rem | ||
--pf-v5-c-spinner--diameter --pf-v5-c-spinner--m-md--diameter --pf-v5-global--icon--FontSize--md $pf-v5-global--icon--FontSize--md pf-font-prem(16px) 1rem | ||||
| svg.pf-v5-c-spinner.pf-m-lg | --pf-v5-c-spinner--diameter | 1.5rem | ||
--pf-v5-c-spinner--diameter --pf-v5-c-spinner--m-lg--diameter --pf-v5-global--icon--FontSize--lg $pf-v5-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem | ||||
| svg.pf-v5-c-spinner.pf-m-xl | --pf-v5-c-spinner--diameter | 3.375rem | ||
--pf-v5-c-spinner--diameter --pf-v5-c-spinner--m-xl--diameter --pf-v5-global--icon--FontSize--xl $pf-v5-global--icon--FontSize--xl pf-font-prem(54px) 3.375rem | ||||
View source on GitHub
