用於展示操作進度，告知用戶當前狀態和預期。
線形進度條 — 百分比外顯
Progress 組件設置percentage屬性即可，表示進度條對應的百分比，必填，必須在 0-100。
1 <el-progress :percentage="0"></el-progress> 2 <el-progress :percentage="70"></el-progress> 3 <el-progress :percentage="100" status="success"></el-progress> 4 <el-progress :percentage="50" status="exception"></el-progress>
線形進度條 — 百分比內顯
百分比不占用額外控件，適用於文件上傳等場景。
Progress 組件可通過 stroke-width 屬性更改進度條的高度，並可通過 text-inside 屬性來將進度條描述置於進度條內部。
1 <el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress> 2 <el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress> 3 <el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress> 4 <el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
環形進度條
Progress 組件可通過 type 屬性來指定使用環形進度條，在環形進度條中，還可以通過 width 屬性來設置其大小。
1 <el-progress type="circle" :percentage="0"></el-progress> 2 <el-progress type="circle" :percentage="25"></el-progress> 3 <el-progress type="circle" :percentage="100" status="success"></el-progress> 4 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
Attributes
| 參數 | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| percentage | 百分比（必填） | number | 0-100 | 0 |
| type | 進度條類型 | string | line/circle | line |
| stroke-width | 進度條的寬度，單位 px | number | — | 6 |
| text-inside | 進度條顯示文字內置在進度條內（只在 type=line 時可用） | Boolean | — | false |
| status | 進度條當前狀態 | string | success/exception | — |
| width | 環形進度條畫布寬度（只在 type=circle 時可用） | number | 126 | |
| show-text | 是否顯示進度條文字內容 | boolean | — | true |