Progress

A bar showing how far along a task is, or that something is working when the amount is unknown.

Feedbackv0.1.0experimentalWCAG 2.2 AAView spec

Uploading report.pdf64%

import { Progress } from "@rdloom/react";

export default function ProgressBasicExample() {
  return (
    <div className="w-80 max-w-full">
      <Progress label="Uploading report.pdf" value={64} />
    </div>
  );
}

Installation

CLI

Manual

npm

pnpm

yarn

bun

npx rdloom add progress

Copies the source into src/components/rdloom. Edit it freely: rdloom upgrade merges later versions into your changes. It needs react-aria-components; add --install to install them.

Use another registry client

npx shadcn@latest add https://rdloom.vimalbhatt.com/r/progress.json

Works, but without upgrade tracking.

Usage

import { Progress } from "@rdloom/react";

<div className="w-80 max-w-full">
  <Progress label="Uploading report.pdf" value={64} />
</div>

Indeterminate

Preparing your export

import { Progress } from "@rdloom/react";

export default function ProgressIndeterminateExample() {
  return (
    <div className="w-80 max-w-full">
      <Progress label="Preparing your export" isIndeterminate />
    </div>
  );
}

Variants

Import finished100%

Storage used9.2 of 10 GB

Quota exceeded100%

import { Progress } from "@rdloom/react";

export default function ProgressVariantsExample() {
  return (
    <div className="flex w-80 max-w-full flex-col gap-4">
      <Progress label="Import finished" value={100} variant="success" />
      <Progress label="Storage used" value={92} variant="warning" valueLabel="9.2 of 10 GB" />
      <Progress label="Quota exceeded" value={100} variant="danger" size="sm" />
    </div>
  );
}

API Reference

Defined by the spec. Components also accept the props of the React Aria component they wrap.

Prop	Type	Default
`label`required What is progressing, e.g. 'Uploading report.pdf'. It is the accessible name.	`string`	none
`value` Current value between minValue and maxValue. Leave out with isIndeterminate.	`number`	none
`minValue` Value at an empty bar.	`number`	`0`
`maxValue` Value at a full bar.	`number`	`100`
`isIndeterminate` The amount is unknown: shows a full, pulsing bar and no number.	`boolean`	`false`
`showValue` Shows the percentage (or valueLabel) beside the label.	`boolean`	`true`
`valueLabel` Replaces the percentage in text and for screen readers, e.g. '3 of 10 files'.	`string`	none
`variant` Bar color. Say it in the label too: color alone isn't enough.	`"default" \| "success" \| "warning" \| "danger"`	`"default"`
`size` Bar thickness.	`"sm" \| "md"`	`"md"`

Accessibility

Role progressbar, WCAG 2.2 AA. Tested with axe and keyboard tests; screen reader checks are in the audit checklist.

Keyboard

Not interactive.

Screen readers announce

Announced as a progress bar with its name and percentage
An indeterminate bar is announced as busy, without a value

What your code must do

Has an accessible name (the label)
Exposes aria-valuenow, aria-valuemin and aria-valuemax, or none of them when indeterminate
The bar color has 3:1 contrast against the track
The pulsing indeterminate animation stops for people who prefer reduced motion

Guidelines

Use it when

Uploads, imports, multi-step processes
Showing usage against a limit

Avoid it when

A short wait with no meaningful progress: use a spinner
A value that is not progress toward something: use a meter

Don't

A bar with no label
Showing 100% while still working
Danger color for something that is only slow

Design tokens

The semantic tokens this component uses. Change them once and every component follows; see Design tokens.

--rd-color-action-primary
--rd-color-feedback-success
--rd-color-feedback-warning
--rd-color-feedback-danger
--rd-color-border-default
--rd-color-text-default
--rd-color-text-muted