Skeleton
A shimmering placeholder shown while content is loading, using
class="skeleton".
Default
Defaults to a height of 1lh, matching a line of text.
Set a width to control how long the placeholder is, and
override height to shape it differently.
<div class="skeleton" style="width: 12rem"></div>
<div class="skeleton" style="width: 8rem"></div>Circle
Add circle to shape it like an avatar placeholder.
<div class="skeleton circle" style="width: 3rem"></div>Preserve content size
Apply class="skeleton" directly to an element with
content. The text is hidden but its size still reserves the layout, so
nothing shifts once the real content loads.
This sentence sets the placeholder's size.
<p class="skeleton">This sentence sets the placeholder's size.</p>Composite
Combine a circle and a few lines to placeholder a user row.
<div style="display: flex; align-items: center; gap: 0.75rem">
<div class="skeleton circle" style="width: 2.5rem"></div>
<div style="display: flex; flex-direction: column; gap: 0.4rem">
<div class="skeleton" style="width: 8rem"></div>
<small class="skeleton" style="width: 5rem"></small>
</div>
</div>