Progress

Display task completion.

Interactive progress

45%

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

Progress states

Static progress

45%

Task failed

Task complete

Unknown duration

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

Circular progress

In progress

45%

Complete

Failed

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

Segments and dashboards

Segmented tasks

75%

Discrete steps

60%

Dashboard

65%

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

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[]`	—	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.

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.

#Progress

#Interactive progress

#Progress states

#Circular progress

#Segments and dashboards

#Progress API

#Types

#Usage notes

#ProgressSegment