Preview Updated 2026-05-10

Skeleton

Placeholder elements for loading states — three shapes, shimmer animation, and a multi-line text helper.

Basic usage

The most common combination — a circular avatar plus two text lines. width / height accept a pixel number or a CSS string ('80%' '2rem').

<div style="display: flex; gap: 12px; align-items: center;">
<CfSkeleton shape="circle" :width="40" :height="40" />
<div style="flex: 1;">
  <CfSkeleton shape="text" :width="120" />
  <CfSkeleton shape="text" :width="200" />
</div>
</div>

<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
<CfSkeleton shape="circle" width={40} height={40} />
<div style={{ flex: 1 }}>
  <CfSkeleton shape="text" width={120} />
  <CfSkeleton shape="text" width={200} />
</div>
</div>

Three shapes

shape — text (a thin line, default 1em tall) / circle (round, for avatars / icons) / rect (a block, for images / cards).

shape = text（一根细线）

shape = circle（圆形头像 / 图标占位）

shape = rect（矩形块 / 图片占位）

<CfSkeleton shape="text" :width="240" />
<CfSkeleton shape="circle" :width="48" :height="48" />
<CfSkeleton shape="rect" :height="80" />

<CfSkeleton shape="text" width={240} />
<CfSkeleton shape="circle" width={48} height={48} />
<CfSkeleton shape="rect" height={80} />

Multiple text lines

When lines > 1 and shape="text", multiple lines render with the last line shrinking to 60% width to mimic a paragraph end.

<CfSkeleton shape="text" :lines="4" />

<CfSkeleton shape="text" lines={4} />

Disable animation

static turns off the shimmer animation and renders a plain block — saves CPU on low-end devices and respects prefers-reduced-motion.

shimmer 动画（默认）

static —— 关闭动画，纯色块

<CfSkeleton shape="rect" :height="40" />
<CfSkeleton shape="rect" :height="40" static />

<CfSkeleton shape="rect" height={40} />
<CfSkeleton shape="rect" height={40} static />

Card placeholder

Combine multiple shapes to mimic the structure of a real card — cover image + avatar + title + subtitle + multi-line body.

<div class="card">
<CfSkeleton shape="rect" :height="120" />
<div class="row">
  <CfSkeleton shape="circle" :width="32" :height="32" />
  <div>
    <CfSkeleton shape="text" :width="100" />
    <CfSkeleton shape="text" :width="160" />
  </div>
</div>
<CfSkeleton shape="text" :lines="3" />
</div>

<div className="card">
<CfSkeleton shape="rect" height={120} />
<div className="row">
  <CfSkeleton shape="circle" width={32} height={32} />
  <div>
    <CfSkeleton shape="text" width={100} />
    <CfSkeleton shape="text" width={160} />
  </div>
</div>
<CfSkeleton shape="text" lines={3} />
</div>

API

Prop	Type	Default	Description
`shape`	`'text' \| 'circle' \| 'rect'`	`'rect'`	Base shape
`width`	`string \| number`	—	Width; numbers are pixels, strings are written verbatim into CSS
`height`	`string \| number`	—	Height; same as above
`lines`	`number`	`1`	Number of lines when shape=text; the last line is 60% wide
`static`	`boolean`	`false`	Disable shimmer; render a plain block (cheaper first paint)