Skip to main content Accessibility Feedback

Skeleton

The .skeleton class creates a gentle pulsing placeholder element that represents content that’s not yet loaded.

<div class="skeleton"></div>

You can control the height, width, and border radius with the --height, --width, and --border-radius CSS variables, respectively.

They can be used in combination to create a realistic looking skeleton layout.

<div class="sidecar">
	<div>
		<div class="skeleton" style="--height: 8em; --width: 8em; --border-radius: 50%;"></div>
	</div>
	<div class="stack">
		<div class="skeleton" style="--width: 8em;"></div>
		<div class="skeleton"></div>
		<div class="skeleton" style="--width: 12em;"></div>
		<div class="skeleton" style="--height: 2em; --width: 6em;"></div>
	</div>
</div>