---
name: "Progress"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.6.15" }
title: "Progress - 进度条"
---

## Progress

> [VERSION] @ray-js/ray >= 0.6.15

### 描述

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

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `percent` | `number` | 否 | `0` | 当前进度，取值范围 0~100 |
| `showInfo` | `boolean` | 否 | `false` | 是否在进度条右侧显示百分比 |
| `borderRadius` | `number \| string` | 否 | `0` | 圆角大小，默认单位 rpx |
| `fontSize` | `number \| string` | 否 | `16` | 右侧百分比字体大小，默认单位 px |
| `strokeWidth` | `number \| string` | 否 | `6` | 进度条线宽，默认单位 rpx |
| `activeColor` | `string` | 否 | `"#007aff"` | 已完成部分的颜色 |
| `backgroundColor` | `string` | 否 | `"rgba(0,0,0,0.04)"` | 未完成部分的颜色 |
| `active` | `boolean` | 否 | `false` | 是否开启从左到右的进度动画 |
| `activeMode` | `"backwards" \| "forwards"` | 否 | `"backwards"` | 动画播放模式，backwards 从头播放，forwards 从上次结束点继续播放 |

### 示例代码

#### 基础用法

```tsx
import React from 'react';
import { View, Progress } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <Progress percent={50} strokeWidth={8} />
    </View>
  );
}
```

#### 显示百分比

```tsx
import React from 'react';
import { View, Progress } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <View style={{ marginBottom: 20 }}>
        <Progress percent={20} showInfo strokeWidth={8} />
      </View>
      <View style={{ marginBottom: 20 }}>
        <Progress percent={60} showInfo strokeWidth={8} />
      </View>
      <View>
        <Progress percent={100} showInfo strokeWidth={8} />
      </View>
    </View>
  );
}
```

#### 自定义样式

```tsx
import React from 'react';
import { View, Progress } from '@ray-js/ray';

export default function Demo() {
  return (
    <View style={{ padding: 20 }}>
      <View style={{ marginBottom: 20 }}>
        <Progress
          percent={70}
          showInfo
          strokeWidth={12}
          borderRadius={6}
          fontSize={14}
          activeColor="#52c41a"
          backgroundColor="#e8e8e8"
        />
      </View>
      <View>
        <Progress
          percent={40}
          showInfo
          strokeWidth={12}
          borderRadius={6}
          activeColor="#ff4d4f"
          backgroundColor="#fff1f0"
        />
      </View>
    </View>
  );
}
```

#### 进度动画

```tsx
import React, { useState } from 'react';
import { View, Progress, Button } from '@ray-js/ray';

export default function Demo() {
  const [percent, setPercent] = useState(0);

  return (
    <View style={{ padding: 20 }}>
      <Progress
        percent={percent}
        showInfo
        strokeWidth={8}
        active
        activeMode="forwards"
      />
      <View style={{ marginTop: 20, display: 'flex', flexDirection: 'row', gap: '10px' }}>
        <Button size="mini" onClick={() => setPercent(Math.min(percent + 20, 100))}>
          增加
        </Button>
        <Button size="mini" onClick={() => setPercent(0)}>
          重置
        </Button>
      </View>
    </View>
  );
}
```