Overview

Skeletons are used to provide a visual representation of where content will eventually be drawn during asynchronous operations.

Effects

There are two built-in effects: sheen and pulse. The default is none, which is static.

None (default)
Sheen
Pulse

Paragraphs

Use multiple skeletons to simulate paragraphs of text.

Avatars

Set equal width and height, then use --border-radius to make circle, rounded, or square avatar skeletons.

Custom Shapes

Apply clip-path to the indicator part for custom shapes.

Custom Colors

Set the --color and --sheen-color custom properties to adjust the skeleton's color.