---
url: /components/progress.md
---
# Progress 进度条

展示操作或任务的当前进度，支持线性（line）与环形（circle / dashboard）两种形态。内置 success / warning / exception 状态色，也可通过 `color` 自定义；`percentage` 超出 0-100 会自动截断，数值变化按 `duration` 秒平滑过渡。

## 基础用法

`percentage` 接受 0-100 的数字；`status` 指定状态后进度条与文字切换为语义色（success 绿 / warning 橙 / exception 红）。

## 内显文字与加粗轨道

`text-inside` 把百分比文字放进进度条内部，需要配合较大的 `stroke-width`（line 形态下 stroke-width 是轨道高度）才有足够空间。

## 环形进度与仪表盘

`type="circle"` 渲染环形进度（`width` 控制直径，`stroke-width` 控制线条粗细），`type="dashboard"` 渲染 270 度仪表盘形态；`color` 传字符串固定颜色。

## 动态进度

进度值变化时按 `duration`（默认 0.3 秒）平滑过渡，适合上传、轮询等场景。

## 自定义颜色

`color` 传函数时入参为当前百分比，返回颜色值，可实现分段变色；传字符串则全程固定颜色。

## 自定义文字

`#text` 插槽替换右侧百分比文字，作用域插槽入参为 `{ percentage }`。

## 使用提示

* circle / dashboard 形态下 `stroke-width` 是相对直径的线条宽度，调大 `width` 时同步调大线条更协调；
* `status` 与 `color` 同时提供时，`color` 优先；
* 环形文字同样支持 `#text` 插槽，常用于将百分比替换为分数、件数等业务语义。

## API