---
name: "progress"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "progress - Progress bar"
---

## progress

> [VERSION] Base Library >= 2.10.0

### Description

Progress bar component to display the current progress of an operation or task.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `percent` | `number` | No | `0` | Current progress, range 0–100 |
| `show-info` | `boolean` | No | `false` | Whether to show the percentage on the right side of the progress bar |
| `border-radius` | `number` | No | `0` | Border radius, default unit: rpx |
| `font-size` | `number` | No | `16` | Font size of the right-side percentage, default unit: px |
| `stroke-width` | `number` | No | `6` | Progress bar line width, default unit: rpx |
| `active-color` | `string` | No | `""` | Color of the completed portion |
| `background-color` | `string` | No | `""` | Color of the unfilled portion |
| `active` | `boolean` | No | `false` | Whether to enable left-to-right progress animation |
| `active-mode` | `string` | No | `"backwards"` | Animation playback mode. Options: backwards (play from the beginning), forwards (resume from the last end) |

### Examples

#### Basic usage

*index.tyml*

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

*index.tyss*

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

*index.js*

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

#### Show percentage

*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 },
});
```

#### Custom styles

*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({});
```

#### Progress animation

*index.tyml*

```xml
// index.tyml
<progress percent="{{percent}}" show-info stroke-width="8" active active-mode="forwards" />
<view class="btn-group">
  <button size="mini" bind:tap="onAdd">Increase</button>
  <button size="mini" bind:tap="onReset">Reset</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 });
  },
});
```