Progress

A native progress indicator for a known amount of work.

Overview

Progress renders a native progress element. Pass value and max when the amount is known. Omit value when it is not.

The track and fill use semantic colors. The element keeps the browser progress semantics, including the current value, instead of a generic bar.

Preview

Customize

Value
0

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add progress

Usage

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

export function UploadProgress() {
  return <Progress aria-label="Upload" value={40} max={100} />;
}

Examples

Determinate

value and max describe how much of the work is complete.

Custom max

max can match a count, such as 3 of 8 files.

Indeterminate

Omit value when the duration is unknown. The element stays a native progress indicator without a fill.

In practice

An upload panel shows the file name, percent complete, status copy, and a Cancel action beside Progress.

40%

2 of 5 MB uploaded. Keep this tab open until the transfer finishes.

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
valuenumber—Current amount. Omit it for the native indeterminate state.
maxnumber1Maximum amount. The browser default is 1.
classNamestring—Merged onto the progress element with cn.

Accessibility

The element is a native progress bar. Assistive technology reads its value and maximum. It does not add a separate ARIA role.

  • Name it with aria-label or a label, because the bar has no visible text.
  • A missing value is the indeterminate state. A value of 0 is empty progress, not indeterminate.
  • The browser default max is 1. Set it when the scale is different.