Progress

A linear progress bar with determinate/indeterminate modes, color variants, striped animation, and optional labels.

Overview

The Progress component displays a linear progress bar for indicating completion or loading state. It supports determinate (known value) and indeterminate (unknown completion) modes, 6 color variants, 3 sizes, striped and animated styles, and optional labels with custom formatting.

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add progress

pnpm dlx @work-rjkashyap/unified-ui add progress

npx @work-rjkashyap/unified-ui add progress

bunx @work-rjkashyap/unified-ui add progress

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { Progress } from "@work-rjkashyap/unified-ui";

Examples

Basic Usage

<Progress value={0} />
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />

<Progress value={0} /><Progress value={25} /><Progress value={50} /><Progress value={75} /><Progress value={100} />

Variants

Default

Primary

Success

Warning

Danger

Info

<Progress value={60} variant="default" />
<Progress value={60} variant="primary" />
<Progress value={60} variant="success" />
<Progress value={60} variant="warning" />
<Progress value={60} variant="danger" />
<Progress value={60} variant="info" />

<Progress value={60} variant="default" /><Progress value={60} variant="primary" /><Progress value={60} variant="success" /><Progress value={60} variant="warning" /><Progress value={60} variant="danger" /><Progress value={60} variant="info" />

Sizes

Small (6px)

Medium (8px, default)

Large (12px)

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

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

Size	Height
`sm`	6px
`md`	8px
`lg`	12px

With Label

45%

72%

Uploading files...30%

Storage used92%

<Progress value={45} showLabel />
<Progress value={72} showLabel variant="success" />
<Progress value={30} showLabel label="Uploading files..." />
<Progress value={92} showLabel label="Storage used" variant="danger" />

<Progress value={45} showLabel /><Progress value={72} showLabel variant="success" /><Progress value={30} showLabel label="Uploading files..." /><Progress value={92} showLabel label="Storage used" variant="danger" />

Custom Format

The formatLabel prop accepts a function to display custom value formats. Since functions cannot be passed directly in MDX, here's the code pattern:

<Progress
  value={750}
  max={1000}
  showLabel
  label="Storage"
  formatLabel={(v, m) => `${v}/${m} MB`}
/>

<Progress
  value={8}
  max={12}
  showLabel
  label="Files uploaded"
  formatLabel={(v, m) => `${v} of ${m}`}
  variant="info"
/>

Storage75%

Files uploaded67%

<Progress
value={750}
max={1000}
showLabel
label="Storage"
formatLabel={(v, m) => `${v}/${m} MB`}
/>

<Progress
value={8}
max={12}
showLabel
label="Files uploaded"
formatLabel={(v, m) => `${v} of ${m}`}
variant="info"
/>

<Progressvalue={750}max={1000}showLabellabel="Storage"formatLabel={(v, m) => `${v}/${m} MB`}/><Progressvalue={8}max={12}showLabellabel="Files uploaded"formatLabel={(v, m) => `${v} of ${m}`}variant="info"/>

Indeterminate

<Progress indeterminate />
<Progress indeterminate variant="info" />
<Progress indeterminate variant="success" size="lg" />

<Progress indeterminate /><Progress indeterminate variant="info" /><Progress indeterminate variant="success" size="lg" />

Striped

Striped + Animated

Striped + Success

Striped + Warning

{/* Static stripes */}
<Progress value={55} striped size="lg" />

{/* Animated sliding stripes */}

<Progress value={55} striped animated size="lg" />

{/* With variant */}

<Progress value={80} striped animated size="lg" variant="success" />
<Progress value={65} striped animated size="lg" variant="warning" />

{/* Static stripes */}<Progress value={55} striped size="lg" />{/* Animated sliding stripes */}<Progress value={55} striped animated size="lg" />{/* With variant */}<Progress value={80} striped animated size="lg" variant="success" /><Progress value={65} striped animated size="lg" variant="warning" />

Real-World Examples

Profile completion6 of 8 steps

Storage used92%

4.6 GB of 5 GB used. Upgrade your plan for more storage.

Uploading 3 files...

{/* Profile completion */}
<div className="flex items-center justify-between">
<span className="text-sm font-medium">Profile completion</span>
<span className="text-sm text-muted-foreground">6 of 8 steps</span>
</div>
<Progress value={75} variant="primary" />

{/* Storage warning */}

<Progress value={92} showLabel label="Storage used" variant="danger" />
<span className="text-xs text-muted-foreground">
4.6 GB of 5 GB used. Upgrade your plan for more storage.
</span>

{/* File upload */}

<span className="text-sm font-medium">Uploading 3 files...</span>
<Progress indeterminate variant="info" size="sm" />

{/* Profile completion */}<div className="flex items-center justify-between"><span className="text-sm font-medium">Profile completion</span><span className="text-sm text-muted-foreground">6 of 8 steps</span></div><Progress value={75} variant="primary" />{/* Storage warning */}<Progress value={92} showLabel label="Storage used" variant="danger" /><span className="text-xs text-muted-foreground">4.6 GB of 5 GB used. Upgrade your plan for more storage.</span>{/* File upload */}<span className="text-sm font-medium">Uploading 3 files...</span><Progress indeterminate variant="info" size="sm" />

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Current progress value (0–100 by default).
`max`	`number`	`100`	Maximum progress value.
`min`	`number`	`0`	Minimum progress value.
`variant`	`"default" \| "primary" \| "success" \| "danger" \| "warning" \| "info"`	`"default"`	Color variant of the indicator bar.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Height of the progress bar.
`indeterminate`	`boolean`	`false`	Displays a looping animation for unknown progress.
`striped`	`boolean`	`false`	Adds diagonal stripes to the indicator bar.
`animated`	`boolean`	`false`	Animates the stripes (only applies when `striped` is true).
`showLabel`	`boolean`	`false`	Shows a label row above the bar with text and value.
`label`	`ReactNode`	—	Custom label text. Replaces default "X%" display.
`formatLabel`	`(value: number, max: number) => string`	—	Custom format function for the progress value label.
`aria-label`	`string`	—	Accessible label when no visible label is present.
`aria-labelledby`	`string`	—	ID of the element that labels the progress bar.
`className`	`string`	—	Additional CSS classes for the track (outer container).
`indicatorClassName`	`string`	—	Additional CSS classes for the indicator (inner fill bar).

Accessibility

When there is no visible label describing what the progress bar represents, provide an aria-label (e.g. aria-label="Upload progress").

role="progressbar" — Proper semantic role for assistive technology.
aria-valuenow — Set to the current value in determinate mode; omitted in indeterminate mode per WAI-ARIA spec.
aria-valuemin / aria-valuemax — Always set to the min and max values.
aria-label / aria-labelledby — Use to provide context when no visible label is present.
Indeterminate — aria-valuenow is intentionally omitted so screen readers announce "progress busy" rather than a stale percentage.

Design Tokens

Token	Usage
`--primary`	Default / primary indicator color
`--success`	Success variant indicator color
`--danger`	Danger variant indicator color
`--warning`	Warning variant indicator color
`--info`	Info variant indicator color
`--muted`	Track background color
`--radius-full`	Rounded pill shape for track & fill
`--duration-standard`	Width transition duration
`--easing-standard`	Width transition easing

On this page