vant/src/skeleton

Skeleton

Intro

Used to display a set of placeholder graphics during the content loading process.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from 'vue';
import { Skeleton } from 'vant';

const app = createApp();
app.use(Skeleton);

Usage

Basic Usage

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

Show Avatar

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

Show Children

<van-skeleton title avatar :row="3" :loading="loading">
  <div>Content</div>
</van-skeleton>

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const loading = ref(true);

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

    return {
      loading,
    };
  },
};

API

Props

Attribute	Description	Type	Default
row	Row count	number | string	0
row-width	Row width, can be array	number | string | (number | string)[]	100%
title	Whether to show title placeholder	boolean	false
avatar	Whether to show avatar placeholder	boolean	false
loading	Whether to show skeleton，pass false to show child component	boolean	true
animate	Whether to enable animation	boolean	true
round	Whether to show round title and row	boolean	false
title-width	Title width	number | string	40%
avatar-size	Size of avatar placeholder	number | string	32px
avatar-shape	Shape of avatar placeholder，can be set to square	string	round

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-skeleton-row-height	16px	-
--van-skeleton-row-background-color	var(--van-active-color)	-
--van-skeleton-row-margin-top	var(--van-padding-sm)	-
--van-skeleton-title-width	40%	-
--van-skeleton-avatar-size	32px	-
--van-skeleton-avatar-background-color	var(--van-active-color)	-
--van-skeleton-animation-duration	1.2s	-