Skeleton

Examples

Default

Loading default content

Percentage widths

Loading percentage width content





Percentage heights

Loading percentage height content

Text modifiers

--pf-t--global--font--size--4xl
Loading text content

--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

Shapes

Small circle
Loading circle content

Medium circle

Large circle

Small square
Loading square content

Medium square

Large square

Small rectangle
Loading rectangle content

Medium rectangle

Large rectangle

Props

Skeleton

*required
NameTypeDefaultDescription
classNamestringAdditional classes added to the Skeleton
fontSize'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl'The font size height of the Skeleton
heightstringThe height of the Skeleton. Must specify pixels or percentage.
screenreaderTextstringText read just to screen reader users
shape'circle' | 'square'The shape of the Skeleton
widthstringThe width of the Skeleton. Must specify pixels or percentage.

CSS variables

Expand or collapse columnSelectorVariableValue
.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)