> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/progress.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Progress

Display task completion.

## Interactive progress


45%

DecreaseIncrease

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/progress/basic.tsx"
import { Button, Flex, Progress, Space } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function ProgressBasic() {
  const [percent, setPercent] = useState(45);
  return (
    <Space direction="vertical" align="stretch">
      <Progress percent={percent} aria-label="Upload progress" />
      <Flex gap="md" align="center" wrap justify="center">
        <Button
          variant="outline"
          disabled={percent === 0}
          onClick={() => setPercent(Math.max(0, percent - 10))}
        >
          Decrease
        </Button>
        <Button disabled={percent === 100} onClick={() => setPercent(Math.min(100, percent + 10))}>
          Increase
        </Button>
      </Flex>
    </Space>
  );
}
```

Expand code

## Progress states


Static progress

45%

Task failed

Task complete

Unknown duration

states.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/progress/states.tsx"
import { Flex, Progress, Space, Text } from '@ifhover/leaf-ui';

export function ProgressStates() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm">
        <Text>Static progress</Text>
        <Progress percent={45} active={false} />
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>Task failed</Text>
        <Progress percent={70} status="error" />
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>Task complete</Text>
        <Progress percent={100} />
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>Unknown duration</Text>
        <Progress indeterminate />
      </Flex>
    </Space>
  );
}
```

Expand code

## Circular progress


In progress

45%

Complete

Failed

circles.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/progress/circles.tsx"
import { Flex, Progress, Text } from '@ifhover/leaf-ui';

export function ProgressCircles() {
  return (
    <Flex gap="md" align="center" wrap justify="center">
      <Flex direction="column" gap="sm" align="start">
        <Text>In progress</Text>
        <Progress percent={45} type="circle" size={80} />
      </Flex>
      <Flex direction="column" gap="sm" align="start">
        <Text>Complete</Text>
        <Progress percent={100} type="circle" size={80} />
      </Flex>
      <Flex direction="column" gap="sm" align="start">
        <Text>Failed</Text>
        <Progress percent={60} type="circle" status="error" size={80} />
      </Flex>
    </Flex>
  );
}
```

Expand code

## Segments and dashboards


Segmented tasks

75%

Discrete steps

60%

Dashboard

65%

capabilities.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/progress/capabilities.tsx"
import { Flex, Progress, Space, Text } from '@ifhover/leaf-ui';

export function Capabilities() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm" align="center">
        <Text>{'Segmented tasks'}</Text>
        <Progress
          percent={75}
          segments={[
            { key: 'a', percent: 35, color: '#20834a' },
            { key: 'b', percent: 40, color: '#1677ff' },
          ]}
        />
      </Flex>
      <Flex direction="column" gap="sm" align="center">
        <Text>{'Discrete steps'}</Text>
        <Progress percent={60} steps={10} />
      </Flex>
      <Flex direction="column" gap="sm" align="center">
        <Text>{'Dashboard'}</Text>
        <Progress type="circle" dashboard percent={65} successPercent={30} />
      </Flex>
    </Space>
  );
}
```

Expand code

Unfinished line progress has a soft shimmer within its filled portion. Set `active={false}` for a static bar. Completed, failed, indeterminate and stepped progress omit the shimmer. Motion preferences from the system and ConfigProvider are respected.

## Progress API

| Property         | Type                                                 | Default    | Description                                                                                                 |
| ---------------- | ---------------------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------- |
| `percent`        | `number`                                             | `0`        | Completion percentage, from 0 to 100                                                                        |
| `type`           | `'line' \| 'circle'`                                 | `'line'`   | Line or circular progress                                                                                   |
| `status`         | `'normal' \| 'success' \| 'error'`                   | `'normal'` | Progress status                                                                                             |
| `showInfo`       | `boolean`                                            | `true`     | Show percentage or status icon                                                                              |
| `format`         | `(percent: number) => ReactNode`                     | —          | Custom progress text                                                                                        |
| `strokeWidth`    | `number`                                             | —          | Stroke width; pixels for lines, view units for circles                                                      |
| `color`          | `string`                                             | —          | Custom progress color                                                                                       |
| `size`           | `number`                                             | `100`      | Circular diameter in pixels                                                                                 |
| `indeterminate`  | `boolean`                                            | `false`    | Animated loading when the total progress is unknown; no percentage                                          |
| `active`         | `boolean`                                            | `true`     | Shimmer inside an unfinished line; false disables it. Completed, failed and indeterminate progress omit it. |
| `trailColor`     | `string`                                             | —          | Track color                                                                                                 |
| `segments`       | `readonly `[`ProgressSegment`](#progresssegment)`[]` | —          | Display multiple sections with proportions and colors.                                                      |
| `steps`          | `number`                                             | —          | Number of discrete progress steps.                                                                          |
| `dashboard`      | `boolean`                                            | `false`    | Display progress as a dashboard gauge.                                                                      |
| `successPercent` | `number`                                             | —          | Part of the progress completed successfully.                                                                |

## Types

Import the component props and item types when preparing your own values.

```ts
import type { ProgressProps } from '@ifhover/leaf-ui';
```

## Usage notes

Reaching 100% automatically uses success styling. Set aria-label to identify the task, such as upload progress. The numeric progress is also exposed to assistive technology.

## ProgressSegment

| Property  | Type     | Default | Description                      |
| --------- | -------- | ------- | -------------------------------- |
| `key`     | `string` | —       | Stable, unique identifier.       |
| `percent` | `number` | `0`     | Required. Completion percentage. |
| `color`   | `string` | —       | Color or semantic tone.          |