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').

背景

src/App.vue

<script setup lang="ts">
import { CfSkeleton } from '@chufix-design/vue';
</script>
<template>
  <div style="max-width: 22rem;">
    <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" />
        <div style="height: 6px;" />
        <CfSkeleton shape="text" :width="200" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { CfSkeleton } from '@chufix-design/vue';
</script>
<template>
  <div style="max-width: 22rem;">
    <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" />
        <div style="height: 6px;" />
        <CfSkeleton shape="text" :width="200" />
      </div>
    </div>
  </div>
</template>

import { CfSkeleton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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（矩形块 / 图片占位）

src/App.vue

<script setup lang="ts">
import { CfSkeleton } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack" style="max-width: 22rem;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">shape = text（一根细线）</div>
      <CfSkeleton shape="text" :width="240" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">shape = circle（圆形头像 / 图标占位）</div>
      <CfSkeleton shape="circle" :width="48" :height="48" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">shape = rect（矩形块 / 图片占位）</div>
      <CfSkeleton shape="rect" :height="80" />
    </div>
  </div>
</template>

<script setup>
import { CfSkeleton } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack" style="max-width: 22rem;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">shape = text（一根细线）</div>
      <CfSkeleton shape="text" :width="240" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">shape = circle（圆形头像 / 图标占位）</div>
      <CfSkeleton shape="circle" :width="48" :height="48" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">shape = rect（矩形块 / 图片占位）</div>
      <CfSkeleton shape="rect" :height="80" />
    </div>
  </div>
</template>

import { CfSkeleton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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.

背景

src/App.vue

<script setup lang="ts">
import { CfSkeleton } from '@chufix-design/vue';
</script>
<template>
  <div style="max-width: 22rem; width: 100%;">
    <CfSkeleton shape="text" :lines="4" />
  </div>
</template>

<script setup>
import { CfSkeleton } from '@chufix-design/vue';
</script>
<template>
  <div style="max-width: 22rem; width: 100%;">
    <CfSkeleton shape="text" :lines="4" />
  </div>
</template>

import { CfSkeleton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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 —— 关闭动画，纯色块

src/App.vue

<script setup lang="ts">
import { CfSkeleton } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack" style="max-width: 22rem;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">shimmer 动画（默认）</div>
      <CfSkeleton shape="rect" :height="40" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">static —— 关闭动画，纯色块</div>
      <CfSkeleton shape="rect" :height="40" static />
    </div>
  </div>
</template>

<script setup>
import { CfSkeleton } from '@chufix-design/vue';
</script>
<template>
  <div class="demo-stack" style="max-width: 22rem;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">shimmer 动画（默认）</div>
      <CfSkeleton shape="rect" :height="40" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">static —— 关闭动画，纯色块</div>
      <CfSkeleton shape="rect" :height="40" static />
    </div>
  </div>
</template>

import { CfSkeleton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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.

背景

src/App.vue

<script setup lang="ts">
import { CfSkeleton } from '@chufix-design/vue';
</script>
<template>
  <div style="max-width: 22rem; padding: 12px; border: 1px solid var(--line-1); border-radius: 8px;">
    <CfSkeleton shape="rect" :height="120" />
    <div style="height: 12px;" />
    <div style="display: flex; gap: 12px; align-items: center;">
      <CfSkeleton shape="circle" :width="32" :height="32" />
      <div style="flex: 1;">
        <CfSkeleton shape="text" :width="100" />
        <div style="height: 6px;" />
        <CfSkeleton shape="text" :width="160" />
      </div>
    </div>
    <div style="height: 8px;" />
    <CfSkeleton shape="text" :lines="3" />
  </div>
</template>

<script setup>
import { CfSkeleton } from '@chufix-design/vue';
</script>
<template>
  <div style="max-width: 22rem; padding: 12px; border: 1px solid var(--line-1); border-radius: 8px;">
    <CfSkeleton shape="rect" :height="120" />
    <div style="height: 12px;" />
    <div style="display: flex; gap: 12px; align-items: center;">
      <CfSkeleton shape="circle" :width="32" :height="32" />
      <div style="flex: 1;">
        <CfSkeleton shape="text" :width="100" />
        <div style="height: 6px;" />
        <CfSkeleton shape="text" :width="160" />
      </div>
    </div>
    <div style="height: 8px;" />
    <CfSkeleton shape="text" :lines="3" />
  </div>
</template>

import { CfSkeleton } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <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)