Skeleton

A skeleton is a type of loading state that allows you to expose content incrementally.

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--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	"\00a0"
	.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)