Ada Lovelace
Principal engineer · enjoys skeletons that never shift the layout.
Showcase
Toggle any demo to see real content turn into a layout-preserving skeleton.
Automatic skeletonization
Arbitrary markup
The engine classifies and paints bones in place.
Mixed content
Headings, text, badges and buttons.
Release notes
A concise summary of what changed in this version, including fixes and improvements.
v0.1.0
Manual primitives
SkeletonBlock
A single sized bone.
SkeletonText
Multi-line text, shorter last line.
SkeletonAvatar
Circular or square avatar.
SkeletonImage
Aspect-ratio media placeholder.
SkeletonButton
Button-shaped bone.
SkeletonCard
Composed media + header + body.
SkeletonList
Repeated avatar + text rows.
SkeletonTable
Header + grid of cells.
Animations
wave
Same content, different preset.
Animated bone
Hover to compare timing and feel.
pulse
Same content, different preset.
Animated bone
Hover to compare timing and feel.
fade
Same content, different preset.
Animated bone
Hover to compare timing and feel.
gradient
Same content, different preset.
Animated bone
Hover to compare timing and feel.
shine
Same content, different preset.
Animated bone
Hover to compare timing and feel.
Directives
v-skeleton-keep
The badge stays real while the rest is skeletonized.
LIVE
This paragraph is skeletonized, but the LIVE badge stays visible.
v-skeleton-union
Collapse a row into a single bone.
- List item 1
- List item 2
- List item 3