El Skeleton

Skeleton Component

Skeleton component provides loading placeholders for better user experience during data loading.

When to Use

• Loading states
• Content placeholders
• Improving perceived performance
• Async data loading

Basic Usage

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

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

Skeleton Slots

SkeletonItem Attributes

Best Practices

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