Skeleton

Skeletons are animated placeholders that indicate loading content.

Usage

Use .Skeleton with a shape modifier to represent the type of content being loaded.

<div class="Skeleton line"></div>
<div class="Skeleton line short"></div>
<div class="Skeleton circle"></div>
<div class="Skeleton block"></div>

Shapes

• .line: Full-width text line placeholder.
• .line.short: Shorter text line, useful for last lines of a paragraph.
• .circle: Circular placeholder for avatars or icons.
• .block: Rectangular block for images or card content.

Example

Sizing

Control dimensions with inline styles when the default size doesn't match your content.

<div class="Skeleton circle" style="width: 48px; height: 48px;"></div>
<div class="Skeleton block" style="height: 200px;"></div>

Animation

Skeletons animate with a shimmer effect by default. The animation is automatically disabled for users who prefer reduced motion (prefers-reduced-motion: reduce).