A shimmering placeholder shown while content is loading, using
class="skeleton".
Standalone
<link rel="stylesheet" href="https://esm.sh/@erikt/ui/skeleton.css" />Default
Defaults to a height of 1em, matching a line of text. Set
a width to control how long the placeholder is, and
override height to shape it differently.
<div class="flex gap-4">
<span class="skeleton circle" style="width: 3rem"></span>
<div class="flex-col-center-y gap-2">
<span class="skeleton" style="width: 12rem"></span>
<span class="skeleton" style="width: 8rem"></span>
</div>
</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>API reference
| Type | Classes / attributes | What it does |
|---|---|---|
| Shape | .circle |
Round placeholder with equal width and height |