A Skeleton has no size or shape attributes: ordinary layout sets its width and height, and a radius token on the host shapes it. It is always hidden from assistive technology, so put aria-busy and a label on the region that is loading.
Motion
Pulse, sweep and none
Default density
Compact density
Restart from the initial state
Show the copyable source
motion picks the treatment and never changes geometry. Reduced-motion preferences stop either animation; animated turns it off for a single placeholder.
Card
Card
Default density
Compact density
Restart from the initial state
Show the copyable source
Reserve each label, control and the submit button at their real heights, using the control-height tokens, so the form lands in place when its data arrives.
Settings form
Default density
Compact density
Restart from the initial state
Show the copyable source
Reserve repeated row geometry rather than rendering empty tables or disabled controls, which would expose fake structure.
API Reference
Every element also accepts motion-policy.
Attributes
AttributePropertyTypeDefaultDescriptionlabellabelstring'Loading'Kept for compatibility and never announced; name the loading region instead.animatedanimatedbooleantrueSet to false to hold this placeholder still while others keep moving.motionmotion'pulse' | 'sweep' | 'none''pulse'How the placeholder moves: pulse fades it, sweep passes a highlight across it, none holds it still.
CSS parts
PartDescription::part(skeleton)The placeholder surface that fills the host and carries the motion.
Related
Components, widgets and patterns that use this one.