Home
Skeleton
Adds a skeleton effect to an element.
Usage
Common placeholders
Use skeleton blocks to reserve layout space while content is loading. Adjust the width and height inline to match the shape of the final content.
<div style="display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; align-items: center; width: min(100%, 28rem);">
<wc-skeleton style="width: 4rem; height: 4rem; --skeleton-container-shape-start-start: 999px; --skeleton-container-shape-start-end: 999px; --skeleton-container-shape-end-start: 999px; --skeleton-container-shape-end-end: 999px;"></wc-skeleton>
<div style="display: grid; gap: 0.5rem;">
<wc-skeleton style="width: 70%; height: 1rem;"></wc-skeleton>
<wc-skeleton style="width: 100%; height: 0.875rem;"></wc-skeleton>
<wc-skeleton style="width: 55%; height: 0.875rem;"></wc-skeleton>
</div>
</div>
<br>
<div style="display: grid; gap: 0.75rem; width: min(100%, 28rem);">
<wc-skeleton style="width: 100%; height: 10rem;"></wc-skeleton>
<wc-skeleton style="width: 45%; height: 1rem;"></wc-skeleton>
<wc-skeleton style="width: 100%; height: 0.875rem;"></wc-skeleton>
<wc-skeleton style="width: 88%; height: 0.875rem;"></wc-skeleton>
</div>
Sizes
Flexible dimensions
The skeleton uses the host element for sizing, so width and height can be set directly with inline styles or utility classes.
<div style="display: grid; gap: 1rem; width: min(100%, 30rem);">
<wc-skeleton style="width: 8rem; height: 0.75rem;"></wc-skeleton>
<wc-skeleton style="width: 14rem; height: 1rem;"></wc-skeleton>
<wc-skeleton style="width: 100%; height: 1.25rem;"></wc-skeleton>
<wc-skeleton style="width: 100%; height: 12rem;"></wc-skeleton>
</div>
Shapes
Shape customization
Use the skeleton shape tokens to match the destination component. This is useful for circular avatars, rounded cards, or sharper input placeholders.
<wc-skeleton style="width: 3.5rem; height: 3.5rem; --skeleton-container-shape-start-start: 999px; --skeleton-container-shape-start-end: 999px; --skeleton-container-shape-end-start: 999px; --skeleton-container-shape-end-end: 999px;"></wc-skeleton>
<wc-skeleton style="width: 8rem; height: 3rem; --skeleton-container-shape-start-start: 0.75rem; --skeleton-container-shape-start-end: 0.75rem; --skeleton-container-shape-end-start: 0.75rem; --skeleton-container-shape-end-end: 0.75rem;"></wc-skeleton>
<wc-skeleton style="width: 10rem; height: 3rem; --skeleton-container-shape-start-start: 0.25rem; --skeleton-container-shape-start-end: 0.25rem; --skeleton-container-shape-end-start: 0.25rem; --skeleton-container-shape-end-end: 0.25rem;"></wc-skeleton>