Progress 进度条

用于展示操作进度，告知用户当前状态和预期。

直线进度条

Progress 组件设置 percentage 属性即可，表示进度条对应的百分比。 该属性必填，并且必须在 0-100 的范围内。 你可以通过设置 format 来自定义文字显示的格式。

Progress 进度条 - 图1

  1. <template>
  2.   <div class="demo-progress">
  3.     <el-progress :percentage="50" />
  4.     <el-progress :percentage="100" :format="format" />
  5.     <el-progress :percentage="100" status="success" />
  6.     <el-progress :percentage="100" status="warning" />
  7.     <el-progress :percentage="50" status="exception" />
  8.   </div>
  9. </template>
  11. <script lang="ts" setup>
  12. const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
  13. </script>
  15. <style scoped>
  16. .demo-progress .el-progress--line {
  17.   margin-bottom: 15px;
  18.   width: 350px;
  19. }
  20. </style>

进度条内显示百分比标识

百分比不占用额外控件，适用于文件上传等场景。

Progress 组件可通过 stroke-width 属性更改进度条的高度，并可通过 text-inside 属性来改变进度条内部的文字。

Progress 进度条 - 图2

  1. <template>
  2.   <div class="demo-progress">
  3.     <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
  4.     <el-progress
  5.       :text-inside="true"
  6.       :stroke-width="24"
  7.       :percentage="100"
  8.       status="success"
  9.     />
  10.     <el-progress
  11.       :text-inside="true"
  12.       :stroke-width="22"
  13.       :percentage="80"
  14.       status="warning"
  15.     />
  16.     <el-progress
  17.       :text-inside="true"
  18.       :stroke-width="20"
  19.       :percentage="50"
  20.       status="exception"
  21.     />
  22.   </div>
  23. </template>
  25. <style scoped>
  26. .demo-progress .el-progress--line {
  27.   margin-bottom: 15px;
  28.   width: 350px;
  29. }
  30. </style>

自定义进度条的颜色

可以通过 color 属性来设置进度条的颜色。 该属性可以接受十六进制颜色值，函数和数组。

Progress 进度条 - 图3

  1. <template>
  2.   <div class="demo-progress">
  3.     <el-progress :percentage="percentage" :color="customColor" />
  5.     <el-progress :percentage="percentage" :color="customColorMethod" />
  7.     <el-progress :percentage="percentage" :color="customColors" />
  8.     <el-progress :percentage="percentage" :color="customColors" />
  9.     <div>
  10.       <el-button-group>
  11.         <el-button :icon="Minus" @click="decrease" />
  12.         <el-button :icon="Plus" @click="increase" />
  13.       </el-button-group>
  14.     </div>
  15.   </div>
  16. </template>
  18. <script lang="ts" setup>
  19. import { ref } from 'vue'
  20. import { Minus, Plus } from '@element-plus/icons-vue'
  22. const percentage = ref(20)
  23. const customColor = ref('#409eff')
  25. const customColors = [
  26.   { color: '#f56c6c', percentage: 20 },
  27.   { color: '#e6a23c', percentage: 40 },
  28.   { color: '#5cb87a', percentage: 60 },
  29.   { color: '#1989fa', percentage: 80 },
  30.   { color: '#6f7ad3', percentage: 100 },
  31. ]
  33. const customColorMethod = (percentage: number) => {
  34.   if (percentage < 30) {
  35.     return '#909399'
  36.   }
  37.   if (percentage < 70) {
  38.     return '#e6a23c'
  39.   }
  40.   return '#67c23a'
  41. }
  42. const increase = () => {
  43.   percentage.value += 10
  44.   if (percentage.value > 100) {
  45.     percentage.value = 100
  46.   }
  47. }
  48. const decrease = () => {
  49.   percentage.value -= 10
  50.   if (percentage.value < 0) {
  51.     percentage.value = 0
  52.   }
  53. }
  54. </script>
  55. <style scoped>
  56. .demo-progress .el-progress--line {
  57.   margin-bottom: 15px;
  58.   width: 350px;
  59. }
  60. </style>

环形进度条

Progress 组件可通过 type 属性来指定使用环形进度条，在环形进度条中，还可以通过 width 属性来设置其大小。

Progress 进度条 - 图4

  1. <template>
  2.   <div class="demo-progress">
  3.     <el-progress type="circle" :percentage="0" />
  4.     <el-progress type="circle" :percentage="25" />
  5.     <el-progress type="circle" :percentage="100" status="success" />
  6.     <el-progress type="circle" :percentage="70" status="warning" />
  7.     <el-progress type="circle" :percentage="50" status="exception" />
  8.   </div>
  9. </template>
  10. <style scoped>
  11. .demo-progress .el-progress--line {
  12.   margin-bottom: 15px;
  13.   width: 350px;
  14. }
  15. .demo-progress .el-progress--circle {
  16.   margin-right: 15px;
  17. }
  18. </style>

仪表盘形进度条

您也可以指定 type 属性到 dashboard 使用控制面板进度栏。

Progress 进度条 - 图5

  1. <template>
  2.   <div class="demo-progress">
  3.     <el-progress type="dashboard" :percentage="percentage" :color="colors" />
  4.     <el-progress type="dashboard" :percentage="percentage2" :color="colors" />
  5.     <div>
  6.       <el-button-group>
  7.         <el-button :icon="Minus" @click="decrease" />
  8.         <el-button :icon="Plus" @click="increase" />
  9.       </el-button-group>
  10.     </div>
  11.   </div>
  12. </template>
  14. <script lang="ts" setup>
  15. import { onMounted, ref } from 'vue'
  16. import { Minus, Plus } from '@element-plus/icons-vue'
  18. const percentage = ref(10)
  19. const percentage2 = ref(0)
  21. const colors = [
  22.   { color: '#f56c6c', percentage: 20 },
  23.   { color: '#e6a23c', percentage: 40 },
  24.   { color: '#5cb87a', percentage: 60 },
  25.   { color: '#1989fa', percentage: 80 },
  26.   { color: '#6f7ad3', percentage: 100 },
  27. ]
  29. const increase = () => {
  30.   percentage.value += 10
  31.   if (percentage.value > 100) {
  32.     percentage.value = 100
  33.   }
  34. }
  35. const decrease = () => {
  36.   percentage.value -= 10
  37.   if (percentage.value < 0) {
  38.     percentage.value = 0
  39.   }
  40. }
  41. onMounted(() => {
  42.   setInterval(() => {
  43.     percentage2.value = (percentage2.value % 100) + 10
  44.   }, 500)
  45. })
  46. </script>
  47. <style scoped>
  48. .demo-progress .el-progress--line {
  49.   margin-bottom: 15px;
  50.   width: 350px;
  51. }
  52. .demo-progress .el-progress--circle {
  53.   margin-right: 15px;
  54. }
  55. </style>

自定义内容

通过默认插槽添加自定义内容。

Progress 进度条 - 图6

  1. <template>
  2.   <div class="demo-progress">
  3.     <el-progress :percentage="50">
  4.       <el-button text>Content</el-button>
  5.     </el-progress>
  6.     <el-progress
  7.       :text-inside="true"
  8.       :stroke-width="20"
  9.       :percentage="50"
  10.       status="exception"
  11.     >
  12.       <span>Content</span>
  13.     </el-progress>
  14.     <el-progress type="circle" :percentage="100" status="success">
  15.       <el-button type="success" :icon="Check" circle />
  16.     </el-progress>
  17.     <el-progress type="dashboard" :percentage="80">
  18.       <template #default="{ percentage }">
  19.         <span class="percentage-value">{{ percentage }}%</span>
  20.         <span class="percentage-label">Progressing</span>
  21.       </template>
  22.     </el-progress>
  23.   </div>
  24. </template>
  26. <script lang="ts" setup>
  27. import { Check } from '@element-plus/icons-vue'
  28. </script>
  30. <style scoped>
  31. .percentage-value {
  32.   display: block;
  33.   margin-top: 10px;
  34.   font-size: 28px;
  35. }
  36. .percentage-label {
  37.   display: block;
  38.   margin-top: 10px;
  39.   font-size: 12px;
  40. }
  41. .demo-progress .el-progress--line {
  42.   margin-bottom: 15px;
  43.   width: 350px;
  44. }
  45. .demo-progress .el-progress--circle {
  46.   margin-right: 15px;
  47. }
  48. </style>

动画进度条

使用 intermediate 属性来设置不确定的进度， duration 来控制动画持续时间。

Progress 进度条 - 图7

  1. <template>
  2.   <div class="demo-progress">
  3.     <el-progress :percentage="50" :indeterminate="true" />
  4.     <el-progress :percentage="100" :format="format" :indeterminate="true" />
  5.     <el-progress
  6.       :percentage="100"
  7.       status="success"
  8.       :indeterminate="true"
  9.       :duration="5"
  10.     />
  11.     <el-progress
  12.       :percentage="100"
  13.       status="warning"
  14.       :indeterminate="true"
  15.       :duration="1"
  16.     />
  17.     <el-progress :percentage="50" status="exception" :indeterminate="true" />
  18.   </div>
  19. </template>
  21. <script lang="ts" setup>
  22. const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
  23. </script>
  24. <style scoped>
  25. .demo-progress .el-progress--line {
  26.   margin-bottom: 15px;
  27.   width: 350px;
  28. }
  29. </style>

Progress 属性

属性说明类型可选值默认值
percentage百分比，必填number0-1000
type进度条类型stringline/circle/dashboardline
stroke-width进度条的宽度number—6
text-inside进度条显示文字内置在进度条内（仅 type 为 ‘line’ 时可用）boolean—false
status进度条当前状态stringsuccess/exception/warning—
indeterminate是否为动画进度条boolean-false
duration控制动画进度条速度number-3
color进度条背景色 进度条背景色 （会覆盖 status 状态颜色）string/function/array—‘’
width环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）number—126
show-text是否显示进度条文字内容boolean—true
stroke-linecapcircle/dashboard 类型路径两端的形状stringbutt/round/squareround
format指定进度条文字内容function(percentage)——

Progress 插槽

名称说明
default自定义内容，参数为 { percentage }

源代码

组件 Progress 进度条 - 图8 • 文档 Progress 进度条 - 图9

贡献者

Progress 进度条 - 图10 三咲智子

Progress 进度条 - 图11 云游君

Progress 进度条 - 图12 jeremywu

Progress 进度条 - 图13 류한경

Progress 进度条 - 图14 Aex

Progress 进度条 - 图15 C.Y.Kun

Progress 进度条 - 图16 Xc

Progress 进度条 - 图17 Delyan Haralanov

Progress 进度条 - 图18 bqy

Progress 进度条 - 图19 Alanscut

Progress 进度条 - 图20 Otto

Progress 进度条 - 图21 滑威

Progress 进度条 - 图22 kooriookami

Progress 进度条 - 图23 on the field of hope

Progress 进度条 - 图24 Hades-li

Progress 进度条 - 图25 hy