Skeleton

A skeleton is a type of loading state that allows you to expose content incrementally. For content that may take a long time to load, use a progress bar in place of a skeleton.

Examples

Default

Percentage width modifiers

Percentage height modifiers

Text modifiers

--pf-v5-global--FontSize--4xl

--pf-v5-global--FontSize--3xl

--pf-v5-global--FontSize--2xl

--pf-v5-global--FontSize--xl

--pf-v5-global--FontSize--lg

--pf-v5-global--FontSize--md

--pf-v5-global--FontSize--sm

Static height width and shape modifiers

Small circle

Medium circle

Large circle

Small square

Medium square

Large square

Small rectangle

Medium rectangle

Large rectangle

Documentation

Usage

Class	Applied to	Outcome
`.pf-v5-c-skeleton`	`<div>`	Initiates the skeleton component. Required
`.pf-m-width-[sm, md, lg, 25, 33, 50, 66, 75]`	`.pf-v5-c-skeleton`	Modifies the width of the skeleton. The default is 100%.
`.pf-m-height-[sm, md, lg, 25, 33, 50, 66, 75, 100]`	`.pf-v5-c-skeleton`	Modifies the height of the skeleton. The default is the inherited font size.
`.pf-m-text-[sm, md, lg, xl, 2xl, 3xl, 4xl]`	`.pf-v5-c-skeleton`	Modifies the skeleton height to match the height of PatternFly's text elements.
`.pf-m-circle`	`.pf-v5-c-skeleton`	Modifies the border radius of the skeleton to be a circle. Use a width modifier to specify the size.
`.pf-m-square`	`.pf-v5-c-skeleton`	Modifies the border radius of the skeleton to be a square. Use a width modifier to specify the size.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--BackgroundColor	#f5f5f5
--pf-v5-c-skeleton--BackgroundColor --pf-v5-global--palette--black-150 $pf-v5-color-black-150 #f5f5f5
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--Width	auto
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--Height	auto
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--BorderRadius	3px
--pf-v5-c-skeleton--BorderRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--before--PaddingBottom	0
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--before--Height	auto
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--before--Content	" "
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--after--LinearGradientAngle	90deg
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--after--LinearGradientColorStop1	#f5f5f5
--pf-v5-c-skeleton--after--LinearGradientColorStop1 --pf-v5-global--palette--black-150 $pf-v5-color-black-150 #f5f5f5
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--after--LinearGradientColorStop2	#ededed
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--after--LinearGradientColorStop3	#f5f5f5
--pf-v5-c-skeleton--after--LinearGradientColorStop3 --pf-v5-global--palette--black-150 $pf-v5-color-black-150 #f5f5f5
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--after--TranslateX	-100%
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--after--AnimationName	pf-v5-c-skeleton-loading
--pf-v5-c-skeleton--after--AnimationName pf-v5-c-skeleton-loading pf-v5-c-skeleton-loading
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--after--AnimationDuration	2s
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--after--AnimationIterationCount	infinite
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--after--AnimationTimingFunction	linear
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--after--AnimationDelay	.5s
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-circle--BorderRadius	30em
--pf-v5-c-skeleton--m-circle--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-circle--before--PaddingBottom	100%
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-text-4xl--Height	calc(2.25rem * 1.3)
--pf-v5-c-skeleton--m-text-4xl--Height calc(--pf-v5-global--FontSize--4xl * --pf-v5-global--LineHeight--sm) calc($pf-v5-global--FontSize--4xl * $pf-v5-global--LineHeight--sm) calc(pf-font-prem(36px) * 1.3) calc(2.25rem * 1.3)
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-text-3xl--Height	calc(1.75rem * 1.3)
--pf-v5-c-skeleton--m-text-3xl--Height calc(--pf-v5-global--FontSize--3xl * --pf-v5-global--LineHeight--sm) calc($pf-v5-global--FontSize--3xl * $pf-v5-global--LineHeight--sm) calc(pf-font-prem(28px) * 1.3) calc(1.75rem * 1.3)
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-text-2xl--Height	calc(1.5rem * 1.3)
--pf-v5-c-skeleton--m-text-2xl--Height calc(--pf-v5-global--FontSize--2xl * --pf-v5-global--LineHeight--sm) calc($pf-v5-global--FontSize--2xl * $pf-v5-global--LineHeight--sm) calc(pf-font-prem(24px) * 1.3) calc(1.5rem * 1.3)
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-text-xl--Height	calc(1.25rem * 1.3)
--pf-v5-c-skeleton--m-text-xl--Height calc(--pf-v5-global--FontSize--xl * --pf-v5-global--LineHeight--sm) calc($pf-v5-global--FontSize--xl * $pf-v5-global--LineHeight--sm) calc(pf-font-prem(20px) * 1.3) calc(1.25rem * 1.3)
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-text-lg--Height	calc(1.125rem * 1.5)
--pf-v5-c-skeleton--m-text-lg--Height calc(--pf-v5-global--FontSize--lg * --pf-v5-global--LineHeight--md) calc($pf-v5-global--FontSize--lg * $pf-v5-global--LineHeight--md) calc(pf-font-prem(18px) * 1.5) calc(1.125rem * 1.5)
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-text-md--Height	calc(1rem * 1.5)
--pf-v5-c-skeleton--m-text-md--Height calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) calc(1rem * 1.5)
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-text-sm--Height	calc(0.875rem * 1.5)
--pf-v5-c-skeleton--m-text-sm--Height calc(--pf-v5-global--FontSize--sm * --pf-v5-global--LineHeight--md) calc($pf-v5-global--FontSize--sm * $pf-v5-global--LineHeight--md) calc(pf-font-prem(14px) * 1.5) calc(0.875rem * 1.5)
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-width-sm--Width	6.25rem
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-width-md--Width	12.5rem
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-width-lg--Width	18.75rem
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-width-25--Width	25%
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-width-33--Width	calc(100% / 3)
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-width-50--Width	50%
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-width-66--Width	calc(100% / 3 * 2)
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-width-75--Width	75%
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-height-sm--Height	6.25rem
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-height-md--Height	12.5rem
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-height-lg--Height	18.75rem
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-height-25--Height	25%
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-height-33--Height	calc(100% / 3)
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-height-50--Height	50%
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-height-66--Height	calc(100% / 3 * 2)
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-height-75--Height	75%
	.pf-v5-c-skeleton	--pf-v5-c-skeleton--m-height-100--Height	100%
	.pf-v5-c-skeleton.pf-m-circle	--pf-v5-c-skeleton--BorderRadius	30em
--pf-v5-c-skeleton--BorderRadius --pf-v5-c-skeleton--m-circle--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em
	.pf-v5-c-skeleton.pf-m-square	--pf-v5-c-skeleton--before--Height	0
	.pf-v5-c-skeleton.pf-m-square	--pf-v5-c-skeleton--before--PaddingBottom	100%
--pf-v5-c-skeleton--before--PaddingBottom --pf-v5-c-skeleton--m-circle--before--PaddingBottom 100%
	.pf-v5-c-skeleton.pf-m-width-sm	--pf-v5-c-skeleton--Width	6.25rem
--pf-v5-c-skeleton--Width --pf-v5-c-skeleton--m-width-sm--Width 6.25rem
	.pf-v5-c-skeleton.pf-m-width-md	--pf-v5-c-skeleton--Width	12.5rem
--pf-v5-c-skeleton--Width --pf-v5-c-skeleton--m-width-md--Width 12.5rem
	.pf-v5-c-skeleton.pf-m-width-lg	--pf-v5-c-skeleton--Width	18.75rem
--pf-v5-c-skeleton--Width --pf-v5-c-skeleton--m-width-lg--Width 18.75rem
	.pf-v5-c-skeleton.pf-m-width-25	--pf-v5-c-skeleton--Width	25%
--pf-v5-c-skeleton--Width --pf-v5-c-skeleton--m-width-25--Width 25%
	.pf-v5-c-skeleton.pf-m-width-33	--pf-v5-c-skeleton--Width	calc(100% / 3)
--pf-v5-c-skeleton--Width --pf-v5-c-skeleton--m-width-33--Width calc(100% / 3)
	.pf-v5-c-skeleton.pf-m-width-50	--pf-v5-c-skeleton--Width	50%
--pf-v5-c-skeleton--Width --pf-v5-c-skeleton--m-width-50--Width 50%
	.pf-v5-c-skeleton.pf-m-width-66	--pf-v5-c-skeleton--Width	calc(100% / 3 * 2)
--pf-v5-c-skeleton--Width --pf-v5-c-skeleton--m-width-66--Width calc(100% / 3 * 2)
	.pf-v5-c-skeleton.pf-m-width-75	--pf-v5-c-skeleton--Width	75%
--pf-v5-c-skeleton--Width --pf-v5-c-skeleton--m-width-75--Width 75%
	.pf-v5-c-skeleton.pf-m-height-sm	--pf-v5-c-skeleton--Height	6.25rem
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-height-sm--Height 6.25rem
	.pf-v5-c-skeleton.pf-m-height-md	--pf-v5-c-skeleton--Height	12.5rem
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-height-md--Height 12.5rem
	.pf-v5-c-skeleton.pf-m-height-lg	--pf-v5-c-skeleton--Height	18.75rem
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-height-lg--Height 18.75rem
	.pf-v5-c-skeleton.pf-m-height-25	--pf-v5-c-skeleton--Height	25%
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-height-25--Height 25%
	.pf-v5-c-skeleton.pf-m-height-33	--pf-v5-c-skeleton--Height	calc(100% / 3)
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-height-33--Height calc(100% / 3)
	.pf-v5-c-skeleton.pf-m-height-50	--pf-v5-c-skeleton--Height	50%
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-height-50--Height 50%
	.pf-v5-c-skeleton.pf-m-height-66	--pf-v5-c-skeleton--Height	calc(100% / 3 * 2)
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-height-66--Height calc(100% / 3 * 2)
	.pf-v5-c-skeleton.pf-m-height-75	--pf-v5-c-skeleton--Height	75%
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-height-75--Height 75%
	.pf-v5-c-skeleton.pf-m-height-100	--pf-v5-c-skeleton--Height	100%
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-height-100--Height 100%
	.pf-v5-c-skeleton.pf-m-text-4xl	--pf-v5-c-skeleton--Height	calc(2.25rem * 1.3)
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-text-4xl--Height calc(--pf-v5-global--FontSize--4xl * --pf-v5-global--LineHeight--sm) calc($pf-v5-global--FontSize--4xl * $pf-v5-global--LineHeight--sm) calc(pf-font-prem(36px) * 1.3) calc(2.25rem * 1.3)
	.pf-v5-c-skeleton.pf-m-text-3xl	--pf-v5-c-skeleton--Height	calc(1.75rem * 1.3)
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-text-3xl--Height calc(--pf-v5-global--FontSize--3xl * --pf-v5-global--LineHeight--sm) calc($pf-v5-global--FontSize--3xl * $pf-v5-global--LineHeight--sm) calc(pf-font-prem(28px) * 1.3) calc(1.75rem * 1.3)
	.pf-v5-c-skeleton.pf-m-text-2xl	--pf-v5-c-skeleton--Height	calc(1.5rem * 1.3)
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-text-2xl--Height calc(--pf-v5-global--FontSize--2xl * --pf-v5-global--LineHeight--sm) calc($pf-v5-global--FontSize--2xl * $pf-v5-global--LineHeight--sm) calc(pf-font-prem(24px) * 1.3) calc(1.5rem * 1.3)
	.pf-v5-c-skeleton.pf-m-text-xl	--pf-v5-c-skeleton--Height	calc(1.25rem * 1.3)
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-text-xl--Height calc(--pf-v5-global--FontSize--xl * --pf-v5-global--LineHeight--sm) calc($pf-v5-global--FontSize--xl * $pf-v5-global--LineHeight--sm) calc(pf-font-prem(20px) * 1.3) calc(1.25rem * 1.3)
	.pf-v5-c-skeleton.pf-m-text-lg	--pf-v5-c-skeleton--Height	calc(1.125rem * 1.5)
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-text-lg--Height calc(--pf-v5-global--FontSize--lg * --pf-v5-global--LineHeight--md) calc($pf-v5-global--FontSize--lg * $pf-v5-global--LineHeight--md) calc(pf-font-prem(18px) * 1.5) calc(1.125rem * 1.5)
	.pf-v5-c-skeleton.pf-m-text-md	--pf-v5-c-skeleton--Height	calc(1rem * 1.5)
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-text-md--Height calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) calc(1rem * 1.5)
	.pf-v5-c-skeleton.pf-m-text-sm	--pf-v5-c-skeleton--Height	calc(0.875rem * 1.5)
--pf-v5-c-skeleton--Height --pf-v5-c-skeleton--m-text-sm--Height calc(--pf-v5-global--FontSize--sm * --pf-v5-global--LineHeight--md) calc($pf-v5-global--FontSize--sm * $pf-v5-global--LineHeight--md) calc(pf-font-prem(14px) * 1.5) calc(0.875rem * 1.5)

View source on GitHub