Van Skeleton

Vant Skeleton Component

Used to display a set of placeholder graphics during the content loading process, improving perceived performance.

When to Invoke

Invoke this skill when:

• User needs to display loading placeholders
• User wants to improve perceived loading performance
• User needs skeleton screens for content loading
• User asks about loading state UI patterns
• User wants to create custom skeleton layouts

Features

• Row Placeholder: Display multiple row placeholders
• Avatar Placeholder: Optional avatar placeholder
• Title Placeholder: Optional title placeholder
• Custom Content: Template slot for custom layouts
• Animation: Configurable animation effect
• Round Style: Option for rounded placeholders
• Loading Toggle: Switch between skeleton and actual content

API Reference

Skeleton Props

Skeleton Slots

Types

import type {
  SkeletonProps,
  SkeletonImageProps,
  SkeletonTitleProps,
  SkeletonAvatarShape,
  SkeletonImageShape,
  SkeletonParagraphProps,
} from 'vant';

CSS Variables

Usage Examples

Basic Usage

<template>
  <van-skeleton title :row="3" />
</template>

Show Avatar

<template>
  <van-skeleton title avatar :row="3" />
</template>

Show Children After Loading

<template>
  <van-skeleton title avatar :row="3" :loading="loading">
    <div class="content">
      <h3>Actual Content</h3>
      <p>This is the real content that appears after loading.</p>
    </div>
  </van-skeleton>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const loading = ref(true);

onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 2000);
});
</script>

Custom Content

<template>
  <van-skeleton>
    <template #template>
      <div :style="{ display: 'flex', width: '100%' }">
        <van-skeleton-image />
        <div :style="{ flex: 1, marginLeft: '16px' }">
          <van-skeleton-paragraph row-width="60%" />
          <van-skeleton-paragraph />
          <van-skeleton-paragraph />
          <van-skeleton-paragraph />
        </div>
      </div>
    </template>
  </van-skeleton>
</template>

Round Style

<template>
  <van-skeleton title avatar :row="3" round />
</template>

Custom Row Width

<template>
  <van-skeleton :row="5" :row-width="['100%', '60%', '80%', '40%', '100%']" />
</template>

Without Animation

<template>
  <van-skeleton title :row="3" :animate="false" />
</template>

List Item Skeleton

<template>
  <div class="list-skeleton">
    <van-skeleton
      v-for="i in 3"
      :key="i"
      title
      avatar
      :row="2"
      :loading="loading"
    >
      <div class="list-item">
        <img :src="items[i - 1]?.avatar" class="avatar" />
        <div class="info">
          <h4>{{ items[i - 1]?.title }}</h4>
          <p>{{ items[i - 1]?.desc }}</p>
        </div>
      </div>
    </van-skeleton>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const loading = ref(true);
const items = ref([]);

onMounted(async () => {
  await fetchData();
  loading.value = false;
});

const fetchData = async () => {
  // Simulate API call
  items.value = [
    { avatar: 'url1', title: 'Title 1', desc: 'Description 1' },
    { avatar: 'url2', title: 'Title 2', desc: 'Description 2' },
    { avatar: 'url3', title: 'Title 3', desc: 'Description 3' },
  ];
};
</script>

Best Practices

1. Match skeleton to content: Design skeleton layout that matches actual content structure
2. Use loading toggle: Use loading prop to seamlessly transition to actual content
3. Consistent sizing: Match skeleton sizes to actual content dimensions
4. Disable animation for static: Use animate="false" for static loading states
5. Custom templates: Use template slot for complex layouts