El Loading

Loading Component

Loading component shows animation while loading data via directive or service.

When to Use

• Data loading states
• Async operation feedback
• Form submission
• Page transitions

Directive Usage

<template>
  <el-table v-loading="loading" :data="tableData">
    <el-table-column prop="name" label="Name" />
  </el-table>
</template>

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

const loading = ref(true)
const tableData = ref([])
</script>

Customization

<template>
  <div
    v-loading="loading"
    element-loading-text="Loading..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    Content
  </div>
</template>

Full Screen

<template>
  <el-button @click="openLoading">Show Full Screen Loading</el-button>
</template>

<script setup>
import { ElLoading } from 'element-plus'

const openLoading = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  setTimeout(() => loading.close(), 2000)
}
</script>

Service Usage

<script setup>
import { ElLoading } from 'element-plus'

const showLoading = () => {
  const instance = ElLoading.service({
    target: '.container',
    text: 'Loading...',
    spinner: 'el-icon-loading',
    background: 'rgba(255, 255, 255, 0.7)'
  })
  
  return instance
}
</script>

API Reference

Options

Directives

Best Practices

1. Use v-loading directive for component-level loading
2. Use ElLoading.service for programmatic control
3. Set lock to prevent scrolling during loading