---
title: Progress 进度
description: 基于 TxProgressBar 的线性进度行
category: Feedback
status: beta
since: 0.3.4
tags: [progress, status, loading]
syncStatus: reviewed
verified: true
---

## 用法

### 状态
`status` 设置状态色。
::::TuffDemoWrapper{demo="ProgressProgressStatesDemo" code-lang="vue"}
---
code: |
  <template>
    <TuffProgress :percentage="40" />
    <TuffProgress :percentage="72" status="warning" />
    <TuffProgress :percentage="100" status="success" />
  </template>
---
::::

### 进度行
::::TuffDemoWrapper{demo="ProgressProgressRowDemo" code-lang="vue"}
---
code: |
  <template>
    <TuffProgress :percentage="60" />
    <TxStatusBadge text="进行中" status="warning" />
  </template>
---
::::

### 自定义文本

```vue
<template>
  <TuffProgress :percentage="42" :format="value => `完成 ${value}%`" />
</template>
```

### 不确定进度

```vue
<template>
  <TuffProgress indeterminate :percentage="60" :show-text="false" />
</template>
```

### 最佳实践

- 简单的行级进度用 `TuffProgress`；需要分段、tooltip、message、loading/success/error 状态、动效或自定义文本位置时，直接用 `TxProgressBar`。
- `strokeWidth` 保持克制；本组件面向行级进度，不用于大号指标。
- 时长未知的任务用 `indeterminate`，没有可信数值时隐藏文本，不要展示过期的百分比。
- 周围界面需要操作上下文时，搭配简短的状态标签。

## API 参考

### 属性

| 属性名 | 类型 | 默认值 | 说明 |
|------|------|---------|------|
| `percentage` | `number` | `0` | 确定进度值。 |
| `status` | `'success' \| 'error' \| 'warning' \| ''` | `''` | 状态色。 |
| `strokeWidth` | `number` | `6` | 进度条高度（px）。 |
| `showText` | `boolean` | `true` | 在进度条外侧显示文本。 |
| `indeterminate` | `boolean` | `false` | 不确定进度模式。 |
| `format` | `(percentage: number) => string` | - | 自定义确定进度的显示文本。 |

## 概述

- 直接渲染 `TxProgressBar`，不额外包裹 DOM；`percentage`、`status`、`indeterminate`、`showText`、`format` 原样转发。
- `strokeWidth` 转为 `height`（如 `"6px"`）；文本位置固定为 `outside`，遮罩样式固定为 `maskVariant="plain"`。
- 不派发事件、不提供插槽，进度由宿主更新 props 驱动。
- 确定进度由 `TxProgressBar` 提供 `role="progressbar"` 与 `aria-valuenow`；不确定进度省略 `aria-valuenow`。

## 技术实现

- 安装入口注册组件名 `TuffProgress`。
- 源码：`packages/tuffex/packages/components/src/progress/`。

<TuffDocSourceLink />