Skeleton

Data Display

Loading placeholder with 6 presets (Card, Avatar, List, Table, Form, Text) and animation variants

Animation Variants

Default

Subtle

Simple pulse animation

Pulse

Popular

Enhanced pulse rhythm

Wave

Premium

Sweeping wave effect

Shimmer

Energetic

Fast shimmer with accent

Gradient

Smooth

Gradient color flow

Glass

Modern

Glass morphism effect

Glow

Attention

Glowing shadow effect

No Animation

A11y

Reduced motion support

Shapes

Rectangle

Circle

Rounded

Text

Card

Button

Input

Avatar

Animation Speeds

Slow (3s)

Calm and subtle

Normal (1.5s)

Balanced default

Fast (1s)

Quick and energetic

Ultra Fast (0.6s)

Very responsive

Multiple Lines & Spacing

Tight Spacing

Normal Spacing

Loose Spacing

Relaxed Spacing

Preset Components

SkeletonCardPreset

SkeletonAvatarPreset

Sizes

With Text (1 line)

With Text (2 lines)

SkeletonListPreset

Default List

Compact List

SkeletonTablePreset

SkeletonFormPreset

SkeletonTextPreset

Short Paragraph

Long Paragraph

Real-world Example

Usage Guidelines

When to Use

Page loads
Data fetching
Image loading

Accessibility

aria-busy on loading container
Hidden from focus

Performance

CSS animation
Minimal DOM footprint

Common Mistakes

Skeleton doesn't match content layout
Showing too long (use retry)

Frequently Asked Questions

Use Skeleton when you know the content structure. Use Spinner for unknown wait times.

Yes, Skeleton includes Card, Avatar, List, Table, Form, and Text presets.

View on GitHub

See the full source code on GitHub

Related Components

View all

Accordion

Collapsible content sections with single/multiple expansion modes, animation, and keyboard navigation