Skip to content
All effectsCard

Skeleton Swap

The skeleton has the shape of the content, so nothing jumps.

Pure CSSCardPro

Usage

Acme Inc.

Meant for

SkeletonCardData Grid

Examples

On a Skeleton

The placeholder blurs out as the real row blurs in. A plain crossfade reads as a flicker; the blur is what makes it a swap. Both layers sit in one grid cell and the skeleton has the row's shape, so nothing reflows at the handover.

TS
Tomasz SawickiReviewer · 4 open

The class is wm wm-skeleton-swap — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.