Skeleton Loader

Stable v1.0.2

A placeholder loading state that mimics the shape of content while it is being fetched — text lines, avatars, or media blocks, with pulse or wave animations.

Interactive Playground

Experiment with shapes, animations, and stacked line counts.

Shape

Text Line

Animation

Pulse

LinesCount: 3

Dimensions

Width (e.g. 240 or 12rem)

Height (e.g. 40 or 3rem)

Live Source Code

<SkeletonLoader
  :count="3"
/>

Implementation Examples

1. Card Placeholder

Stack a rounded media block with text lines to mirror a card while its content loads.

<SkeletonLoader shape="rounded" height="140" />
<SkeletonLoader shape="text" width="60%" height="1.1rem" />
<SkeletonLoader shape="text" :count="2" />

2. List / Avatar Rows

Pair a circle avatar with adjacent text lines for user lists, comments, or notification feeds.

<div v-for="n in 3" :key="n" class="flex items-center gap-4">
  <SkeletonLoader shape="circle" width="48" animation="wave" />
  <div class="flex-1">
    <SkeletonLoader shape="text" width="40%" height="0.9rem" animation="wave" />
    <SkeletonLoader shape="text" :count="2" animation="wave" class="mt-2" />
  </div>
</div>

API Reference

Props

Name	Type	Default	Description
shape	"text" \| "circle" \| "rectangle" \| "rounded"	"text"	Controls the placeholder shape. `text` renders a thin pill matching line-height, `circle` for avatars, `rectangle`/`rounded` for media or card blocks.
width	string \| number	undefined	Fixed width. Numbers are treated as pixels. Falls back to 100% (or the resolved height for `circle`).
height	string \| number	undefined	Fixed height. Numbers are treated as pixels. Falls back to a sensible default per shape.
animation	"pulse" \| "wave" \| "none"	"pulse"	The loading animation. `wave` sweeps a shimmer gradient across the placeholder; `none` renders a static block.
count	number	1	Renders multiple stacked placeholders. For `text` shape with no explicit `width`, the last line is shortened to read like a wrapped paragraph.