Feedback

Skeleton

A placeholder shown while content loads.

stableNo JS requiredhydrateless/skeleton.css

A placeholder shown while content loads. Mark it aria-hidden="true" so screen readers skip it. It respects prefers-reduced-motion. CSS-only.

Playground

Live

Varianttextrectcircle

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
variant	'rect' | 'text' | 'circle'	'rect'	Shape of the placeholder.
width	string	—	CSS width.
height	string	—	CSS height.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-surface	Base color of the placeholder.

Accessibility

• Mark skeletons aria-hidden="true" so assistive tech skips placeholder noise.
• The shimmer animation is disabled under prefers-reduced-motion.

Related

SpinnerA loading indicator that inherits currentColor.ProgressA progress bar built on the native <progress> element.AvatarA user image with a graceful text fallback.