Configurable Rows

<template>
  <el-skeleton :rows="5" animated />
</template>

Animation

<template>
  <el-skeleton animated />
</template>

Customized Template

<template>
  <el-skeleton animated>
    <template #template>
      <el-skeleton-item variant="image" style="width: 240px; height: 240px" />
      <div style="padding: 14px">
        <el-skeleton-item variant="h3" style="width: 50%" />
        <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 16px;">
          <el-skeleton-item variant="text" style="width: 30%" />
          <el-skeleton-item variant="text" style="width: 30%" />
        </div>
      </div>
    </template>
  </el-skeleton>
</template>

Loading State

<template>
  <el-skeleton :loading="loading" animated>
    <template #default>
      <div class="content">Real content here</div>
    </template>
  </el-skeleton>
</template>

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

const loading = ref(true)

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

Avoiding Rendering Bouncing

<template>
  <el-skeleton :loading="loading" :throttle="500" animated>
    <template #default>
      <div>Content</div>
    </template>
  </el-skeleton>
</template>

API Reference

Skeleton Attributes

Name	Description	Type	Default
animated	Show animation	`boolean`	`false`
count	Number of fake items	`number`	`1`
loading	Show real DOM	`boolean`	`false`
rows	Number of rows	`number`	`3`
throttle	Rendering delay (ms)	`number \| object`	`0`

Skeleton Slots

Name	Description	Type
default	Real rendering DOM	`$attrs`
template	Skeleton template	`{ key: number }`

SkeletonItem Attributes

Name	Description	Type	Default
variant	Skeleton type	`'p' \| 'text' \| 'h1' \| 'h3' \| 'caption' \| 'button' \| 'image' \| 'circle' \| 'rect'`	`'text'`

Best Practices

Use throttle to prevent flashing on fast loads
Match skeleton structure to real content
Use animated for better UX

el-skeleton

Skeleton Component

When to Use

Basic Usage