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

Loading contents

Percentage widths

Loaded 25% of content

Loaded 33% of content

Loaded 50% of content

Loaded 66% of content

Loaded 75% of content

Percentage heights

Loaded 25% of content
Loaded 33% of content
Loaded 50% of content
Loaded 66% of content
Loaded 75% of content
Loaded 100% of content

Text modifiers

--pf-t--global--font--size--4xl
Loading font size 4xl

--pf-t--global--font--size--3xl
Loading font size 3xl

--pf-t--global--font--size--2xl
Loading font size 2xl

--pf-t--global--font--size--xl
Loading font size xl

--pf-t--global--font--size--lg
Loading font size lg

--pf-t--global--font--size--md
Loading font size md

--pf-t--global--font--size--sm
Loading font size sm

Shapes

Small circle
Loading small circle contents

Medium circle
Loading medium circle contents

Large circle
Loading large circle contents

Small square
Loading small square contents

Medium square
Loading medium square contents

Large square
Loading large square contents

Small rectangle
Loading small rectangle contents

Medium rectangle
Loading medium rectangle contents

Large rectangle
Loading large rectangle contents

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

View source on GitHub