Skeleton

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

Examples

--pf-v6-global--FontSize--4xl

--pf-v6-global--FontSize--3xl

--pf-v6-global--FontSize--2xl

--pf-v6-global--FontSize--xl

--pf-v6-global--FontSize--lg

--pf-v6-global--FontSize--md

--pf-v6-global--FontSize--sm

Small circle

Medium circle

Large circle

Small square

Medium square

Large square

Small rectangle

Medium rectangle

Large rectangle

Class	Applied to	Outcome
`.pf-v6-c-skeleton`	`<div>`	Initiates the skeleton component. Required
`.pf-m-width-[sm, md, lg, 25, 33, 50, 66, 75]`	`.pf-v6-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-v6-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-v6-c-skeleton`	Modifies the skeleton height to match the height of PatternFly's text elements.
`.pf-m-circle`	`.pf-v6-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-v6-c-skeleton`	Modifies the border radius of the skeleton to be a square. Use a width modifier to specify the size.