Progress 进度条

Progress 用于展示操作进度，告知用户当前状态和预期。VISTA B 直接使用 Element Plus 的 el-progress，常用于附件上传、数据处理、任务执行和容量占用等场景。

直线进度条

通过 percentage 设置进度百分比，该值必填且范围为 0-100。可以通过 format 自定义右侧文字。

50%

Full

vue

<script setup>
const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
</script>

<template>
  <el-progress :percentage="50" />
  <el-progress :percentage="100" :format="format" />
  <el-progress :percentage="100" status="success" />
  <el-progress :percentage="100" status="warning" />
  <el-progress :percentage="50" status="exception" />
</template>

进度条内显示百分比标识

设置 text-inside 后，百分比会显示在进度条内部；通过 stroke-width 可以调整进度条高度。

70%

100%

80%

50%

vue

<el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success" />
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning" />
<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception" />

自定义进度条的颜色

color 支持十六进制颜色、函数和颜色数组。设置 color 后会覆盖 status 对应的状态色。

20%

vue

<script setup>
import { ref } from 'vue'
import { Minus, Plus } from '@element-plus/icons-vue'

const percentage = ref(20)
const customColor = '#409eff'
const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
]

const customColorMethod = (percentage) => {
  if (percentage < 30) return '#909399'
  if (percentage < 70) return '#e6a23c'
  return '#67c23a'
}
</script>

环形进度条

设置 type="circle" 后，进度条会以环形展示。通过 width 可以设置环形画布宽度。

25%

vue

<el-progress type="circle" :percentage="0" />
<el-progress type="circle" :percentage="25" />
<el-progress type="circle" :percentage="100" status="success" />
<el-progress type="circle" :percentage="70" status="warning" />
<el-progress type="circle" :percentage="50" status="exception" />

仪表盘形进度条

设置 type="dashboard" 后，进度条会以仪表盘形展示，适合任务完成度或容量占用类信息。

10%

50%

vue

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

const percentage = ref(10)
const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
]
</script>

<template>
  <el-progress type="dashboard" :percentage="percentage" :color="colors" />
</template>

自定义内容

通过默认插槽可以自定义显示内容。插槽参数会提供当前 percentage。

Content

80%Progressing

vue

<script setup>
import { Check } from '@element-plus/icons-vue'
</script>

<template>
  <el-progress :percentage="50">
    <el-button text>Content</el-button>
  </el-progress>
  <el-progress type="circle" :percentage="100" status="success">
    <el-button type="success" :icon="Check" circle />
  </el-progress>
  <el-progress type="dashboard" :percentage="80">
    <template #default="{ percentage }">
      <span>{{ percentage }}%</span>
      <span>Progressing</span>
    </template>
  </el-progress>
</template>

动画进度条

设置 indeterminate 后可展示不确定进度，通过 duration 控制动画持续时间。

50%

Full

vue

<el-progress :percentage="50" :indeterminate="true" />
<el-progress :percentage="100" :format="format" :indeterminate="true" />
<el-progress :percentage="100" status="success" :indeterminate="true" :duration="5" />

条纹进度条

设置 striped 后展示条纹进度条；设置 striped-flow 后条纹会流动，通过 duration 控制流动速度。

50%

vue

<el-progress :percentage="50" :stroke-width="15" striped />
<el-progress :percentage="30" :stroke-width="15" status="warning" striped striped-flow />
<el-progress
  :percentage="100"
  :stroke-width="15"
  status="success"
  striped
  striped-flow
  :duration="10"
/>

API

Progress 属性

属性	说明	类型	默认值
`percentage`	进度百分比，范围 `0-100`	`number`	`0`
`type`	进度条类型	`line` / `circle` / `dashboard`	`line`
`stroke-width`	进度条宽度	`number`	`6`
`text-inside`	进度条显示文字内置在进度条内，仅 `line` 类型可用	`boolean`	`false`
`status`	进度条当前状态	`success` / `exception` / `warning`	-
`indeterminate`	是否为动画进度条	`boolean`	`false`
`duration`	控制动画进度条速度和条纹流动速度	`number`	`3`
`color`	进度条颜色，会覆盖 `status` 状态颜色	`string` / `function` / `array`	`''`
`width`	环形进度条画布宽度，仅 `circle` / `dashboard` 类型可用	`number`	`126`
`show-text`	是否显示进度条文字内容	`boolean`	`true`
`stroke-linecap`	`circle` / `dashboard` 类型路径两端形状	`butt` / `round` / `square`	`round`
`format`	指定进度条文字内容	`(percentage: number) => string`	-
`striped`	是否展示条纹进度条	`boolean`	`false`
`striped-flow`	是否让条纹流动	`boolean`	`false`

Progress 插槽

插槽	说明	类型
`default`	自定义内容	`{ percentage: number }`

使用提醒

上传、识别、导入等任务进度优先使用直线进度条，空间受限时再使用环形进度条。
percentage 需要保持在 0-100 范围内，动态计算时应做好边界处理。
color 会覆盖 status，如果颜色本身有状态语义，应在同一页面中保持一致。

Progress 进度条 ​

直线进度条 ​

进度条内显示百分比标识 ​

自定义进度条的颜色 ​

环形进度条 ​

仪表盘形进度条 ​

自定义内容 ​

动画进度条 ​

条纹进度条 ​

API ​

Progress 属性 ​

Progress 插槽 ​

使用提醒 ​