Loading…

Progress

Shows how far along a task is, or that one is running at all.

Feedback
1 file
2 npm packages
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add progress

npm packages installed: class-variance-authority, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Progress } from "@/components/ui/progress";

Examples

Every example the tests run, live and operable, side by side.

Default
With Label
Indeterminate
Tones
Sizes
Animated Progress Bar

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Progress>

Prop	Type	Default
`easing` How the fill travels to a new value. `smooth` eases in, as it always has; `spring` carries slightly past the value and settles, like SmoothUI's spring. Default `smooth`.	`"smooth" \| "spring"`	`"smooth"`
`effect` A moving texture on the fill while the value is known: `striped` runs diagonal stripes along it, `shine` sweeps a highlight across it. Decoration — both stop under reduced motion. Default `none`.	`"none" \| "striped" \| "shine"`	`"none"`
`fillOnMount` Fills from empty on mount instead of appearing at its value. For a bar that is revealed once, like a result or a quota; not for one that is polled, which would replay on every remount. Default `false`.	`boolean`	`false`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`tone`	`"primary" \| "success" \| "warning" \| "destructive"`	`"primary"`

Every prop of Radix UI’s Progress.Root, plus className.

Accessibility

Exposed as role="progressbar" with aria-valuenow, and give it a name with aria-label or aria-labelledby. Omitting `value` marks it indeterminate, which is announced differently from zero. Show the percentage in text as well — the bar alone is not readable at a glance for everyone. The optional stripe and shine effects are decoration: they stop under reduced motion and never apply to an indeterminate bar.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Prop

Type

Default

easing

How the fill travels to a new value. smooth eases in, as it always has; spring carries slightly past the value and settles, like SmoothUI's spring. Default smooth.

"smooth" | "spring"

"smooth"

effect

A moving texture on the fill while the value is known: striped runs diagonal stripes along it, shine sweeps a highlight across it. Decoration — both stop under reduced motion. Default none.

"none" | "striped" | "shine"

"none"

fillOnMount

Fills from empty on mount instead of appearing at its value. For a bar that is revealed once, like a result or a quota; not for one that is polled, which would replay on every remount. Default false.

boolean

false

size

"sm" | "md" | "lg"

"md"

tone

"primary" | "success" | "warning" | "destructive"

"primary"