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--BackgroundColor
  • --pf-t--global--background--color--secondary--default
  • --pf-t--global--background--color--200
  • --pf-t--color--gray--10
  • #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--BorderRadius
  • --pf-t--global--spacer--sm
  • --pf-t--global--spacer--200
  • 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--after--LinearGradientColorStop1
  • --pf-t--global--background--color--secondary--default
  • --pf-t--global--background--color--200
  • --pf-t--color--gray--10
  • #f2f2f2
.pf-v6-c-skeleton--pf-v6-c-skeleton--after--LinearGradientColorStop2
(In light theme) #e0e0e0
  • --pf-v6-c-skeleton--after--LinearGradientColorStop2
  • --pf-t--global--background--color--secondary--hover
  • --pf-t--global--background--color--300
  • --pf-t--color--gray--20
  • #e0e0e0
.pf-v6-c-skeleton--pf-v6-c-skeleton--after--LinearGradientColorStop3
(In light theme) #f2f2f2
  • --pf-v6-c-skeleton--after--LinearGradientColorStop3
  • --pf-t--global--background--color--secondary--default
  • --pf-t--global--background--color--200
  • --pf-t--color--gray--10
  • #f2f2f2
.pf-v6-c-skeleton--pf-v6-c-skeleton--after--TranslateX
0
.pf-v6-c-skeleton--pf-v6-c-skeleton--after--AnimationName
pf-v6-c-skeleton-loading-reduced-motion
  • --pf-v6-c-skeleton--after--AnimationName
  • pf-v6-c-skeleton-loading-reduced-motion
  • pf-v6-c-skeleton-loading-reduced-motion
.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--m-circle--BorderRadius
  • --pf-t--global--border--radius--pill
  • --pf-t--global--border--radius--500
  • 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--m-text-4xl--Height
  • calc(--pf-t--global--font--size--4xl * --pf-t--global--font--line-height--heading)
  • calc(--pf-t--global--font--size--800 * --pf-t--global--font--line-height--100)
  • 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--m-text-3xl--Height
  • calc(--pf-t--global--font--size--3xl * --pf-t--global--font--line-height--heading)
  • calc(--pf-t--global--font--size--700 * --pf-t--global--font--line-height--100)
  • 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--m-text-2xl--Height
  • calc(--pf-t--global--font--size--2xl * --pf-t--global--font--line-height--heading)
  • calc(--pf-t--global--font--size--600 * --pf-t--global--font--line-height--100)
  • 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--m-text-xl--Height
  • calc(--pf-t--global--font--size--xl * --pf-t--global--font--line-height--heading)
  • calc(--pf-t--global--font--size--500 * --pf-t--global--font--line-height--100)
  • 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--m-text-lg--Height
  • calc(--pf-t--global--font--size--lg * --pf-t--global--font--line-height--body)
  • calc(--pf-t--global--font--size--400 * --pf-t--global--font--line-height--200)
  • 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--m-text-md--Height
  • calc(--pf-t--global--font--size--md * --pf-t--global--font--line-height--body)
  • calc(--pf-t--global--font--size--300 * --pf-t--global--font--line-height--200)
  • 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--m-text-sm--Height
  • calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--body)
  • calc(--pf-t--global--font--size--200 * --pf-t--global--font--line-height--200)
  • 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--BorderRadius
  • --pf-v6-c-skeleton--m-circle--BorderRadius
  • --pf-t--global--border--radius--pill
  • --pf-t--global--border--radius--500
  • 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--before--PaddingBlockEnd
  • --pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd
  • 100%
.pf-v6-c-skeleton.pf-m-width-sm--pf-v6-c-skeleton--Width
6.25rem
  • --pf-v6-c-skeleton--Width
  • --pf-v6-c-skeleton--m-width-sm--Width
  • 6.25rem
.pf-v6-c-skeleton.pf-m-width-md--pf-v6-c-skeleton--Width
12.5rem
  • --pf-v6-c-skeleton--Width
  • --pf-v6-c-skeleton--m-width-md--Width
  • 12.5rem
.pf-v6-c-skeleton.pf-m-width-lg--pf-v6-c-skeleton--Width
18.75rem
  • --pf-v6-c-skeleton--Width
  • --pf-v6-c-skeleton--m-width-lg--Width
  • 18.75rem
.pf-v6-c-skeleton.pf-m-width-25--pf-v6-c-skeleton--Width
25%
  • --pf-v6-c-skeleton--Width
  • --pf-v6-c-skeleton--m-width-25--Width
  • 25%
.pf-v6-c-skeleton.pf-m-width-33--pf-v6-c-skeleton--Width
calc(100% / 3)
  • --pf-v6-c-skeleton--Width
  • --pf-v6-c-skeleton--m-width-33--Width
  • calc(100% / 3)
.pf-v6-c-skeleton.pf-m-width-50--pf-v6-c-skeleton--Width
50%
  • --pf-v6-c-skeleton--Width
  • --pf-v6-c-skeleton--m-width-50--Width
  • 50%
.pf-v6-c-skeleton.pf-m-width-66--pf-v6-c-skeleton--Width
calc(100% / 3 * 2)
  • --pf-v6-c-skeleton--Width
  • --pf-v6-c-skeleton--m-width-66--Width
  • calc(100% / 3 * 2)
.pf-v6-c-skeleton.pf-m-width-75--pf-v6-c-skeleton--Width
75%
  • --pf-v6-c-skeleton--Width
  • --pf-v6-c-skeleton--m-width-75--Width
  • 75%
.pf-v6-c-skeleton.pf-m-height-sm--pf-v6-c-skeleton--Height
6.25rem
  • --pf-v6-c-skeleton--Height
  • --pf-v6-c-skeleton--m-height-sm--Height
  • 6.25rem
.pf-v6-c-skeleton.pf-m-height-md--pf-v6-c-skeleton--Height
12.5rem
  • --pf-v6-c-skeleton--Height
  • --pf-v6-c-skeleton--m-height-md--Height
  • 12.5rem
.pf-v6-c-skeleton.pf-m-height-lg--pf-v6-c-skeleton--Height
18.75rem
  • --pf-v6-c-skeleton--Height
  • --pf-v6-c-skeleton--m-height-lg--Height
  • 18.75rem
.pf-v6-c-skeleton.pf-m-height-25--pf-v6-c-skeleton--Height
25%
  • --pf-v6-c-skeleton--Height
  • --pf-v6-c-skeleton--m-height-25--Height
  • 25%
.pf-v6-c-skeleton.pf-m-height-33--pf-v6-c-skeleton--Height
calc(100% / 3)
  • --pf-v6-c-skeleton--Height
  • --pf-v6-c-skeleton--m-height-33--Height
  • calc(100% / 3)
.pf-v6-c-skeleton.pf-m-height-50--pf-v6-c-skeleton--Height
50%
  • --pf-v6-c-skeleton--Height
  • --pf-v6-c-skeleton--m-height-50--Height
  • 50%
.pf-v6-c-skeleton.pf-m-height-66--pf-v6-c-skeleton--Height
calc(100% / 3 * 2)
  • --pf-v6-c-skeleton--Height
  • --pf-v6-c-skeleton--m-height-66--Height
  • calc(100% / 3 * 2)
.pf-v6-c-skeleton.pf-m-height-75--pf-v6-c-skeleton--Height
75%
  • --pf-v6-c-skeleton--Height
  • --pf-v6-c-skeleton--m-height-75--Height
  • 75%
.pf-v6-c-skeleton.pf-m-height-100--pf-v6-c-skeleton--Height
100%
  • --pf-v6-c-skeleton--Height
  • --pf-v6-c-skeleton--m-height-100--Height
  • 100%
.pf-v6-c-skeleton.pf-m-text-4xl--pf-v6-c-skeleton--Height
calc(2.25rem * 1.3)
  • --pf-v6-c-skeleton--Height
  • --pf-v6-c-skeleton--m-text-4xl--Height
  • calc(--pf-t--global--font--size--4xl * --pf-t--global--font--line-height--heading)
  • calc(--pf-t--global--font--size--800 * --pf-t--global--font--line-height--100)
  • 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--Height
  • --pf-v6-c-skeleton--m-text-3xl--Height
  • calc(--pf-t--global--font--size--3xl * --pf-t--global--font--line-height--heading)
  • calc(--pf-t--global--font--size--700 * --pf-t--global--font--line-height--100)
  • 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--Height
  • --pf-v6-c-skeleton--m-text-2xl--Height
  • calc(--pf-t--global--font--size--2xl * --pf-t--global--font--line-height--heading)
  • calc(--pf-t--global--font--size--600 * --pf-t--global--font--line-height--100)
  • 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--Height
  • --pf-v6-c-skeleton--m-text-xl--Height
  • calc(--pf-t--global--font--size--xl * --pf-t--global--font--line-height--heading)
  • calc(--pf-t--global--font--size--500 * --pf-t--global--font--line-height--100)
  • 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--Height
  • --pf-v6-c-skeleton--m-text-lg--Height
  • calc(--pf-t--global--font--size--lg * --pf-t--global--font--line-height--body)
  • calc(--pf-t--global--font--size--400 * --pf-t--global--font--line-height--200)
  • 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--Height
  • --pf-v6-c-skeleton--m-text-md--Height
  • calc(--pf-t--global--font--size--md * --pf-t--global--font--line-height--body)
  • calc(--pf-t--global--font--size--300 * --pf-t--global--font--line-height--200)
  • calc(1rem * 1.5)
.pf-v6-c-skeleton.pf-m-text-sm--pf-v6-c-skeleton--Height
calc(0.875rem * 1.5)
  • --pf-v6-c-skeleton--Height
  • --pf-v6-c-skeleton--m-text-sm--Height
  • calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--body)
  • calc(--pf-t--global--font--size--200 * --pf-t--global--font--line-height--200)
  • calc(0.875rem * 1.5)