Progress Bar - HapplyUI

A progress bar component to show the completion status of a task or process, with multiple color options.

Installation

bunx @happlyui/cli@latest add progress-bar

Dependencies

Registry dependencies

These are automatically installed when you add this component.

tv

Usage

import * as ProgressBar from "@/components/ui/progress-bar"

<ProgressBar.Root value={50} max={100} color="blue" />

Examples

Color

Progress bars in all available colors: blue (default), red, orange, green, and primary.

<ProgressBar.Root value={50} color="blue" />
<ProgressBar.Root value={50} color="red" />
<ProgressBar.Root value={50} color="primary" />

With Label

A progress bar with an inline percentage label.

55%

<div className="flex items-center gap-2">
  <ProgressBar.Root value={55} />
  <span className="text-paragraph-xs text-text-sub-600">55%</span>
</div>

Data Storage Example

A composed example with title, progress bar, percentage, and an upgrade link.

Data Storage55%

to unlock unlimited data storage.

<ProgressBar.Root value={55} />
<LinkButton.Root variant="primary" underline>Upgrade</LinkButton.Root>

Indeterminate

Use when progress is in-progress but not measurable (e.g. waiting on a response, finalizing). The bar slides continuously and ignores value/max.

<ProgressBar.Root indeterminate />

Indeterminate Colors

Indeterminate animation in all available colors.

<ProgressBar.Root indeterminate color="blue" />
<ProgressBar.Root indeterminate color="red" />
<ProgressBar.Root indeterminate color="primary" />

Indeterminate With Finalizing Label

A common pattern for the trailing window after a task hits 100% but is still being finalized — show the indeterminate bar under a status label.

Finalizing your matches...

<div className="space-y-1.5">
  <span className="text-label-sm text-text-strong-950">Finalizing your matches...</span>
  <ProgressBar.Root indeterminate color="primary" />
</div>

API Reference

ProgressBar.Root

The main progress bar component.

Prop	Type	Default	Description
`color`	`'blue' \| 'red' \| 'orange' \| 'green' \| 'primary'`	`'blue'`	The color of the progress indicator
`value`	`number`	`0`	The current progress value
`max`	`number`	`100`	The maximum progress value
`indeterminate`	`boolean`	`false`	When true, renders a continuous sliding animation and ignores value/max. Use when progress is in-progress but not measurable.