Progress

Overview

Progress is a horizontal bar that communicates how far along a determinate task is — an upload, a multi-step flow, or a quota. It is built on Radix UI Progress, so it exposes the correct progress roles and values to assistive technology.

The fill is driven by the value prop (a percentage from 0 to 100), and its color maps to a brand color via the color prop. For an indeterminate or spinning state, use a Spinner; for circular progress, see Radial Graph.

Usage

Import the component:

import { Progress } from "@eqtylab/equality";

Basic usage — pass a value between 0 and 100:

<Progress value={75} />

Percentage Examples

0%

75%

100%

Color Variants

The color prop maps the bar to a brand color — primary (default), secondary, green, red, and yellow — so you can distinguish progress by context.

Primary (default)

Secondary

Green

Red

Yellow

Usage

<Progress value={50} color="primary" />
<Progress value={50} color="secondary" />
<Progress value={50} color="green" />
<Progress value={50} color="red" />
<Progress value={50} color="yellow" />

Props

Progress also accepts the underlying Radix Progress Root props (such as max) and className.