elementui progress
Element UI Progress 组件
Element UI 提供了一个 Progress 组件，用于展示操作的当前进度。该组件支持多种样式和配置选项，适用于文件上传、任务完成度等场景。
基本用法
通过 percentage 属性设置进度百分比（0-100），默认显示直线型进度条：
<el-progress :percentage="50"></el-progress>进度条类型
通过 type 属性切换进度条样式，支持以下类型：
line（默认）：直线型circle：环形dashboard：仪表盘型
<el-progress type="circle" :percentage="70"></el-progress>
<el-progress type="dashboard" :percentage="80"></el-progress>自定义颜色
使用 color 属性自定义进度条颜色，支持传入颜色字符串、函数或数组：
<el-progress :percentage="60" color="#f56c6c"></el-progress>
<!-- 分段颜色 -->
<el-progress
:percentage="90"
:color="[
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#67c23a', percentage: 60 }
]">
</el-progress>动态效果
通过 status 属性控制进度状态，可选值：
success：成功状态（绿色）exception：异常状态（红色）warning：警告状态（黄色）
<el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="30" status="exception"></el-progress>内部显示百分比
设置 text-inside 属性可将百分比显示在进度条内部（仅 line 类型有效）：
<el-progress
:percentage="50"
:stroke-width="20"
text-inside>
</el-progress>自定义宽度/半径
stroke-width：控制进度条宽度（直线型）或环形半径（圆形）width：控制环形进度条的整体尺寸
<el-progress
type="circle"
:percentage="75"
:width="120"
:stroke-width="10">
</el-progress>动画效果
启用 indeterminate 属性可实现不确定进度动画：
<el-progress :percentage="50" :indeterminate="true"></el-progress>格式化文本
通过 format 属性自定义百分比文本显示：
<el-progress
:percentage="100"
:format="percent => `完成度：${percent}%`">
</el-progress>注意事项
- 环形/仪表盘类型需额外设置
width控制大小 - 动态修改
percentage时建议使用 Vue 的数据绑定 - 分段颜色配置需确保百分比区间连续且覆盖 0-100 范围
