---
name: "progress"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "progress - 进度条"
---

## progress

> [VERSION] 基础库 >= 2.10.0

### 描述

进度条组件，用于展示操作或任务的当前进度。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `percent` | `number` | 否 | `0` | 当前进度，取值范围 0~100 |
| `show-info` | `boolean` | 否 | `false` | 是否在进度条右侧显示百分比 |
| `border-radius` | `number` | 否 | `0` | 圆角大小，默认单位 rpx |
| `font-size` | `number` | 否 | `16` | 右侧百分比字体大小，默认单位 px |
| `stroke-width` | `number` | 否 | `6` | 进度条线宽，默认单位 rpx |
| `active-color` | `string` | 否 | `""` | 已完成部分的颜色 |
| `background-color` | `string` | 否 | `""` | 未完成部分的颜色 |
| `active` | `boolean` | 否 | `false` | 是否开启从左到右的进度动画 |
| `active-mode` | `string` | 否 | `"backwards"` | 动画播放模式，可选值：backwards 从头播放，forwards 从上次结束点继续播放 |

### 示例代码

#### 基础用法

*index.tyml*

```xml
<progress percent="{{percent}}" active />
```

*index.tyss*

```css
progress { margin: 20rpx; }
```

*index.js*

```javascript
Page({
  data: { percent: 50 },
});
```

#### 显示百分比

*index.tyml*

```xml
<progress percent="{{percent}}" show-info active stroke-width="6" />
```

*index.tyss*

```css
progress { margin: 20rpx; }
```

*index.js*

```javascript
Page({
  data: { percent: 80 },
});
```

#### 自定义样式

*index.tyml*

```xml
<view class="progress-wrap">
  <progress percent="70" show-info stroke-width="12" border-radius="6" font-size="14" active-color="#52c41a" background-color="#e8e8e8" />
</view>
<view class="progress-wrap">
  <progress percent="40" show-info stroke-width="12" border-radius="6" active-color="#ff4d4f" background-color="#fff1f0" />
</view>
```

*index.tyss*

```css
.progress-wrap { margin: 20rpx; }
```

*index.js*

```javascript
Page({});
```

#### 进度动画

*index.tyml*

```xml
<progress percent="{{percent}}" show-info stroke-width="8" active active-mode="forwards" />
<view class="btn-group">
  <button size="mini" bind:tap="onAdd">增加</button>
  <button size="mini" bind:tap="onReset">重置</button>
</view>
```

*index.tyss*

```css
progress { margin: 20rpx; }
.btn-group { display: flex; flex-direction: row; gap: 20rpx; margin: 20rpx; }
```

*index.js*

```javascript
Page({
  data: { percent: 0 },
  onAdd() {
    this.setData({ percent: Math.min(this.data.percent + 20, 100) });
  },
  onReset() {
    this.setData({ percent: 0 });
  },
});
```