Progress

Progress indicators show the completion status of a task or operation. This package includes two variants: a linear progress bar and a circular progress indicator.

Linear Progress Bar

Basic Usage

import { ProgressBar } from '@/components'

<ProgressBar value={60} />

Counter Position: Right

Display a percentage counter to the right of the progress bar.

<ProgressBar value={60} counter="right" />

Counter Position: Below

Display a percentage counter below the progress bar.

<ProgressBar value={60} counter="below" />

Controlled

Control the progress value externally.

const [value, setValue] = useState(30)

<ProgressBar value={value} counter="right" />

All Variants

Circular Progress

Basic Usage

import { CircularProgress } from '@/components'

<CircularProgress value={60} />

Custom Sizes

Customize the size and stroke width of the circular progress.

<CircularProgress value={60} size={80} strokeWidth={6} />
<CircularProgress value={60} size={120} strokeWidth={8} />
<CircularProgress value={60} size={150} strokeWidth={8} />

Without Label

Hide the center percentage label.

<CircularProgress value={75} showLabel={false} />

Controlled

Control the progress value externally.

const [value, setValue] = useState(30)

<CircularProgress value={value} />

All Variants

Accessibility

ProgressBar

• Built on Radix UI Progress primitive for robust accessibility
• Proper ARIA attributes (role="progressbar", aria-valuenow, aria-valuemin, aria-valuemax)
• Screen reader friendly progress announcements

CircularProgress

• Uses role="progressbar" with proper ARIA attributes
• SVG is marked as decorative (aria-hidden="true") since the parent provides accessibility
• Label is visible and readable by screen readers

API Reference

ProgressBar Props

CircularProgress Props