Examples
Text modifiers
--pf-global--FontSize--4xl
--pf-global--FontSize--3xl
--pf-global--FontSize--2xl
--pf-global--FontSize--xl
--pf-global--FontSize--lg
--pf-global--FontSize--md
--pf-global--FontSize--sm
Loading font size 4xl
--pf-global--FontSize--3xl
Loading font size 3xl
--pf-global--FontSize--2xl
Loading font size 2xl
--pf-global--FontSize--xl
Loading font size xl
--pf-global--FontSize--lg
Loading font size lg
--pf-global--FontSize--md
Loading font size md
--pf-global--FontSize--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
.pf-c-skeleton | --pf-c-skeleton--BackgroundColor | #f5f5f5 | |
.pf-c-skeleton | --pf-c-skeleton--Width | auto | |
.pf-c-skeleton | --pf-c-skeleton--Height | auto | |
.pf-c-skeleton | --pf-c-skeleton--BorderRadius | 3px | |
.pf-c-skeleton | --pf-c-skeleton--before--PaddingBottom | 0 | |
.pf-c-skeleton | --pf-c-skeleton--before--Height | auto | |
.pf-c-skeleton | --pf-c-skeleton--before--Content | " " | |
.pf-c-skeleton | --pf-c-skeleton--after--LinearGradientAngle | 90deg | |
.pf-c-skeleton | --pf-c-skeleton--after--LinearGradientColorStop1 | #f5f5f5 | |
.pf-c-skeleton | --pf-c-skeleton--after--LinearGradientColorStop2 | #ededed | |
.pf-c-skeleton | --pf-c-skeleton--after--LinearGradientColorStop3 | #f5f5f5 | |
.pf-c-skeleton | --pf-c-skeleton--after--TranslateX | -100% | |
.pf-c-skeleton | --pf-c-skeleton--after--AnimationName | pf-c-skeleton-loading | |
.pf-c-skeleton | --pf-c-skeleton--after--AnimationDuration | 2s | |
.pf-c-skeleton | --pf-c-skeleton--after--AnimationIterationCount | infinite | |
.pf-c-skeleton | --pf-c-skeleton--after--AnimationTimingFunction | linear | |
.pf-c-skeleton | --pf-c-skeleton--after--AnimationDelay | .5s | |
.pf-c-skeleton | --pf-c-skeleton--m-circle--BorderRadius | 30em | |
.pf-c-skeleton | --pf-c-skeleton--m-circle--before--PaddingBottom | 100% | |
.pf-c-skeleton | --pf-c-skeleton--m-text-4xl--Height | calc(2.25rem * 1.3) | |
.pf-c-skeleton | --pf-c-skeleton--m-text-3xl--Height | calc(1.75rem * 1.3) | |
.pf-c-skeleton | --pf-c-skeleton--m-text-2xl--Height | calc(1.5rem * 1.3) | |
.pf-c-skeleton | --pf-c-skeleton--m-text-xl--Height | calc(1.25rem * 1.3) | |
.pf-c-skeleton | --pf-c-skeleton--m-text-lg--Height | calc(1.125rem * 1.5) | |
.pf-c-skeleton | --pf-c-skeleton--m-text-md--Height | calc(1rem * 1.5) | |
.pf-c-skeleton | --pf-c-skeleton--m-text-sm--Height | calc(0.875rem * 1.5) | |
.pf-c-skeleton | --pf-c-skeleton--m-width-sm--Width | 6.25rem | |
.pf-c-skeleton | --pf-c-skeleton--m-width-md--Width | 12.5rem | |
.pf-c-skeleton | --pf-c-skeleton--m-width-lg--Width | 18.75rem | |
.pf-c-skeleton | --pf-c-skeleton--m-width-25--Width | 25% | |
.pf-c-skeleton | --pf-c-skeleton--m-width-33--Width | calc(100% / 3) | |
.pf-c-skeleton | --pf-c-skeleton--m-width-50--Width | 50% | |
.pf-c-skeleton | --pf-c-skeleton--m-width-66--Width | calc(100% / 3 * 2) | |
.pf-c-skeleton | --pf-c-skeleton--m-width-75--Width | 75% | |
.pf-c-skeleton | --pf-c-skeleton--m-height-sm--Height | 6.25rem | |
.pf-c-skeleton | --pf-c-skeleton--m-height-md--Height | 12.5rem | |
.pf-c-skeleton | --pf-c-skeleton--m-height-lg--Height | 18.75rem | |
.pf-c-skeleton | --pf-c-skeleton--m-height-25--Height | 25% | |
.pf-c-skeleton | --pf-c-skeleton--m-height-33--Height | calc(100% / 3) | |
.pf-c-skeleton | --pf-c-skeleton--m-height-50--Height | 50% | |
.pf-c-skeleton | --pf-c-skeleton--m-height-66--Height | calc(100% / 3 * 2) | |
.pf-c-skeleton | --pf-c-skeleton--m-height-75--Height | 75% | |
.pf-c-skeleton | --pf-c-skeleton--m-height-100--Height | 100% | |
.pf-c-skeleton.pf-m-circle | --pf-c-skeleton--BorderRadius | 30em | |
.pf-c-skeleton.pf-m-square | --pf-c-skeleton--before--Height | 0 | |
.pf-c-skeleton.pf-m-square | --pf-c-skeleton--before--PaddingBottom | 100% | |
.pf-c-skeleton.pf-m-width-sm | --pf-c-skeleton--Width | 6.25rem | |
.pf-c-skeleton.pf-m-width-md | --pf-c-skeleton--Width | 12.5rem | |
.pf-c-skeleton.pf-m-width-lg | --pf-c-skeleton--Width | 18.75rem | |
.pf-c-skeleton.pf-m-width-25 | --pf-c-skeleton--Width | 25% | |
.pf-c-skeleton.pf-m-width-33 | --pf-c-skeleton--Width | calc(100% / 3) | |
.pf-c-skeleton.pf-m-width-50 | --pf-c-skeleton--Width | 50% | |
.pf-c-skeleton.pf-m-width-66 | --pf-c-skeleton--Width | calc(100% / 3 * 2) | |
.pf-c-skeleton.pf-m-width-75 | --pf-c-skeleton--Width | 75% | |
.pf-c-skeleton.pf-m-height-sm | --pf-c-skeleton--Height | 6.25rem | |
.pf-c-skeleton.pf-m-height-md | --pf-c-skeleton--Height | 12.5rem | |
.pf-c-skeleton.pf-m-height-lg | --pf-c-skeleton--Height | 18.75rem | |
.pf-c-skeleton.pf-m-height-25 | --pf-c-skeleton--Height | 25% | |
.pf-c-skeleton.pf-m-height-33 | --pf-c-skeleton--Height | calc(100% / 3) | |
.pf-c-skeleton.pf-m-height-50 | --pf-c-skeleton--Height | 50% | |
.pf-c-skeleton.pf-m-height-66 | --pf-c-skeleton--Height | calc(100% / 3 * 2) | |
.pf-c-skeleton.pf-m-height-75 | --pf-c-skeleton--Height | 75% | |
.pf-c-skeleton.pf-m-height-100 | --pf-c-skeleton--Height | 100% | |
.pf-c-skeleton.pf-m-text-4xl | --pf-c-skeleton--Height | calc(2.25rem * 1.3) | |
.pf-c-skeleton.pf-m-text-3xl | --pf-c-skeleton--Height | calc(1.75rem * 1.3) | |
.pf-c-skeleton.pf-m-text-2xl | --pf-c-skeleton--Height | calc(1.5rem * 1.3) | |
.pf-c-skeleton.pf-m-text-xl | --pf-c-skeleton--Height | calc(1.25rem * 1.3) | |
.pf-c-skeleton.pf-m-text-lg | --pf-c-skeleton--Height | calc(1.125rem * 1.5) | |
.pf-c-skeleton.pf-m-text-md | --pf-c-skeleton--Height | calc(1rem * 1.5) | |
.pf-c-skeleton.pf-m-text-sm | --pf-c-skeleton--Height | calc(0.875rem * 1.5) | |
View source on GitHub