Skeleton

Skeleton renders a decorative loading placeholder. It intentionally does not prescribe shape: set size, layout, and border radius with class or inline styles.

Anatomy

Highlight

Element	Part	Selector
<component>	root	[data-scope="skeleton"][data-part="root"] left_clickLMBCopy

Props

Name	Description	Default	Control
asOptional	Element tag used for the skeleton root. string | undefined	"div"
animationOptional	Loading placeholder animation. nonepulsewave	"pulse"	nonepulsecheckwave

Events0

No events documented.

Slots0

No slots documented.

Styling3

Preview

Token	Description
--md-skeleton-animation-durationMotion Fallback1.4s	Controls animation duration.
--md-skeleton-container-colorColor Fallbackvar(--md-color-container,--translucent(var(--md-sys-color-on-surface),0.12))	Controls placeholder container color.
--md-skeleton-highlight-colorColor Fallback--translucent(var(--md-sys-color-on-surface),0.08)	Controls wave highlight color.

Examples

Default

Shapes

Animations

Pulse

Wave

None