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

## Progress

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

### Description

Progress bar component for displaying the current progress of an operation or task.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `percent` | `number` | No | `0` | Current progress, range 0-100 |
| `showInfo` | `boolean` | No | `false` | Whether to show the percentage on the right of the progress bar |
| `borderRadius` | `number \| string` | No | `0` | Corner radius, default unit rpx |
| `fontSize` | `number \| string` | No | `16` | Right-side percentage font size, default unit px |
| `strokeWidth` | `number \| string` | No | `6` | Progress bar line width, default unit rpx |
| `activeColor` | `string` | No | `"#007aff"` | Color of the completed portion |
| `backgroundColor` | `string` | No | `"rgba(0,0,0,0.04)"` | Color of the unfinished portion |
| `active` | `boolean` | No | `false` | Whether to enable left-to-right progress animation |
| `activeMode` | `"backwards" \| "forwards"` | No | `"backwards"` | Animation playback mode: backwards plays from the beginning; forwards continues from the last end point |

### Examples

#### Basic usage

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

#### Display percentage

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

#### Custom styles

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

#### Progress animation

```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))}>
          Increase
        </Button>
        <Button size="mini" onClick={() => setPercent(0)}>
          Reset
        </Button>
      </View>
    </View>
  );
}
```