Skeleton

The Skeleton component is a placeholder UI element that simulates the layout of content while the actual data is being loaded.

Anatomy

Item	Name	Description
1	Shape	Shape that represents different content types in a single skeleton loader.

Specification and properties

Variants

The Skeleton component comes in different variants, which can be used individually or in a composition, depending on the content.

Text

Card

Circle

Motion

Action: Skeleton pulse Fade In

Layer	Trigger	Attribute	Duration	Easing	Delay	Effect
Skeleton element	Auto	Opacity	Duration50	EasyInOut		Fade In

Action: Skeleton pulse Fade Out

Layer	Trigger	Attribute	Duration	Easing	Delay	Effect
Skeleton element	Auto	Opacity	Duration50	EasyInOut		Fade Out

Skeletons must always use motion. Avoid static Skeleton shapes, as they can be mistaken for disabled or decorative elements rather than an active loading state.