ProgressBar

Horizontal progress indicator with determinate and indeterminate modes. Supports semantic color variants and optional percentage display.

import { ProgressBar } from 'phoundry-ui';

The bar exposes role="progressbar" with aria-valuenow when determinate. Omit value or pass a negative number for indeterminate (no aria-valuenow).

Determinate

Show code

<ProgressBar value={65} />

Variants

Show code

<ProgressBar value={100} variant="success" />
<ProgressBar value={50} variant="warning" />
<ProgressBar value={25} variant="error" />

Sizes

Show code

<ProgressBar value={60} size="sm" />
<ProgressBar value={60} size="md" />
<ProgressBar value={60} size="lg" />

With Value

65%

Show code

<ProgressBar value={value} showValue />

Clamped values

Useful when raw progress can overshoot before you snap to complete.

100%

Show code

<ProgressBar value={150} variant="success" showValue />
<!-- Renders as 100% — values are clamped to 0–100. -->

Indeterminate

Show code

<ProgressBar />

Props

Prop	Type	Default	Description
value	number	—	0–100 for determinate progress. Omit or pass -1 for indeterminate.
variant	'default' \| 'success' \| 'warning' \| 'error'	'default'	Semantic color of the progress fill.
size	'sm' \| 'md' \| 'lg'	'md'	Bar thickness.
showValue	boolean	false	Display percentage text next to the bar.
class	string	—	Additional CSS classes.

Usage tips

Omit value or pass -1 for an animated indeterminate bar.
Use variant="success" when progress reaches 100% to reinforce completion.
Enable showValue for file uploads or long-running tasks where users need exact progress.