El Progress

Progress Component

Progress component shows the progress of current operations with linear, circle, or dashboard styles.

When to Use

• Upload progress
• Task completion
• Loading states
• Status indicators

Basic Usage

<template>
  <el-progress :percentage="50" />
</template>

Internal Percentage

<template>
  <el-progress :percentage="70" :stroke-width="20" text-inside />
</template>

Custom Color

<template>
  <el-progress :percentage="percentage" :color="customColor" />
</template>

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

const percentage = ref(70)
const customColor = '#409eff'
</script>

Circular Progress

<template>
  <el-progress type="circle" :percentage="75" />
</template>

Dashboard Progress

<template>
  <el-progress type="dashboard" :percentage="percentage">
    <template #default="{ percentage }">
      <span class="percentage-value">{{ percentage }}%</span>
    </template>
  </el-progress>
</template>

Indeterminate Progress

<template>
  <el-progress :percentage="50" indeterminate :duration="3" />
</template>

Striped Progress

<template>
  <el-progress :percentage="70" striped striped-flow />
</template>

API Reference

Attributes

Slots

Best Practices

1. Use type="circle" for compact displays
2. Use indeterminate for unknown progress
3. Use format for custom text display