Examples
Percentage widths
Loaded 25% of content
Loaded 33% of content
Loaded 50% of content
Loaded 66% of content
Loaded 75% of content
Percentage heights
Loaded 25% of content
Loaded 33% of content
Loaded 50% of content
Loaded 66% of content
Loaded 75% of content
Loaded 100% of content
Text modifiers
--pf-t--global--font--size--4xl
--pf-t--global--font--size--3xl
--pf-t--global--font--size--2xl
--pf-t--global--font--size--xl
--pf-t--global--font--size--lg
--pf-t--global--font--size--md
--pf-t--global--font--size--sm
Loading font size 4xl
--pf-t--global--font--size--3xl
Loading font size 3xl
--pf-t--global--font--size--2xl
Loading font size 2xl
--pf-t--global--font--size--xl
Loading font size xl
--pf-t--global--font--size--lg
Loading font size lg
--pf-t--global--font--size--md
Loading font size md
--pf-t--global--font--size--sm
Loading font size sm
Shapes
Small circle
Medium circle
Large circle
Small square
Medium square
Large square
Small rectangle
Medium rectangle
Large rectangle
Loading small circle contents
Medium circle
Loading medium circle contents
Large circle
Loading large circle contents
Small square
Loading small square contents
Medium square
Loading medium square contents
Large square
Loading large square contents
Small rectangle
Loading small rectangle contents
Medium rectangle
Loading medium rectangle contents
Large rectangle
Loading large rectangle contents
Props
Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Additional classes added to the Skeleton | |
| fontSize | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | The font size height of the Skeleton | |
| height | string | The height of the Skeleton. Must specify pixels or percentage. | |
| screenreaderText | string | Text read just to screen reader users | |
| shape | 'circle' | 'square' | The shape of the Skeleton | |
| width | string | The width of the Skeleton. Must specify pixels or percentage. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--Width | auto | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--Height | auto | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--BorderRadius | 0.5rem | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--before--PaddingBlockEnd | 0 | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--before--Height | auto | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--before--Content | " " | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--LinearGradientAngle | 90deg | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--LinearGradientColorStop1 | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--LinearGradientColorStop2 | (In light theme) #e0e0e0 | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--LinearGradientColorStop3 | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--TranslateX | -100% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--AnimationName | pf-v6-c-skeleton-loading | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--AnimationDuration | 3s | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--AnimationIterationCount | infinite | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--AnimationTimingFunction | linear | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--after--AnimationDelay | .5s | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-circle--BorderRadius | 999px | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd | 100% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-4xl--Height | calc(2.25rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-3xl--Height | calc(1.75rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-2xl--Height | calc(1.5rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-xl--Height | calc(1.25rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-lg--Height | calc(1.125rem * 1.5) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-md--Height | calc(1rem * 1.5) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-text-sm--Height | calc(0.875rem * 1.5) | ||
| ||||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-sm--Width | 6.25rem | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-md--Width | 12.5rem | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-lg--Width | 18.75rem | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-25--Width | 25% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-33--Width | calc(100% / 3) | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-50--Width | 50% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-66--Width | calc(100% / 3 * 2) | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-width-75--Width | 75% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-sm--Height | 6.25rem | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-md--Height | 12.5rem | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-lg--Height | 18.75rem | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-25--Height | 25% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-33--Height | calc(100% / 3) | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-50--Height | 50% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-66--Height | calc(100% / 3 * 2) | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-75--Height | 75% | ||
| .pf-v6-c-skeleton | --pf-v6-c-skeleton--m-height-100--Height | 100% | ||
| .pf-v6-c-skeleton.pf-m-circle | --pf-v6-c-skeleton--BorderRadius | 999px | ||
| ||||
| .pf-v6-c-skeleton.pf-m-square | --pf-v6-c-skeleton--before--Height | 0 | ||
| .pf-v6-c-skeleton.pf-m-square | --pf-v6-c-skeleton--before--PaddingBlockEnd | 100% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-sm | --pf-v6-c-skeleton--Width | 6.25rem | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-md | --pf-v6-c-skeleton--Width | 12.5rem | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-lg | --pf-v6-c-skeleton--Width | 18.75rem | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-25 | --pf-v6-c-skeleton--Width | 25% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-33 | --pf-v6-c-skeleton--Width | calc(100% / 3) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-50 | --pf-v6-c-skeleton--Width | 50% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-66 | --pf-v6-c-skeleton--Width | calc(100% / 3 * 2) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-width-75 | --pf-v6-c-skeleton--Width | 75% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-sm | --pf-v6-c-skeleton--Height | 6.25rem | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-md | --pf-v6-c-skeleton--Height | 12.5rem | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-lg | --pf-v6-c-skeleton--Height | 18.75rem | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-25 | --pf-v6-c-skeleton--Height | 25% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-33 | --pf-v6-c-skeleton--Height | calc(100% / 3) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-50 | --pf-v6-c-skeleton--Height | 50% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-66 | --pf-v6-c-skeleton--Height | calc(100% / 3 * 2) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-75 | --pf-v6-c-skeleton--Height | 75% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-height-100 | --pf-v6-c-skeleton--Height | 100% | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-4xl | --pf-v6-c-skeleton--Height | calc(2.25rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-3xl | --pf-v6-c-skeleton--Height | calc(1.75rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-2xl | --pf-v6-c-skeleton--Height | calc(1.5rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-xl | --pf-v6-c-skeleton--Height | calc(1.25rem * 1.3) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-lg | --pf-v6-c-skeleton--Height | calc(1.125rem * 1.5) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-md | --pf-v6-c-skeleton--Height | calc(1rem * 1.5) | ||
| ||||
| .pf-v6-c-skeleton.pf-m-text-sm | --pf-v6-c-skeleton--Height | calc(0.875rem * 1.5) | ||
| ||||