Skeleton

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

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.