Skip to main content
/mantle

Progress Bar

Displays an indicator showing the completion progress of a task as a linear progress bar with customizable colors.

The progress bar consists of an indicator (filled portion) that shows the current progress value against a background container.

Complete
In Progress
Starting
import { ProgressBar } from "@ngrok/mantle/progress"; <ProgressBar.Root aria-label="Task progress" value={60}>	<ProgressBar.Indicator className="bg-warning-600" /></ProgressBar.Root> <ProgressBar.Root aria-label="Task progress" value={30}>	<ProgressBar.Indicator className="bg-accent-600" /></ProgressBar.Root> <div className="flex flex-col gap-3">	<div className="flex items-center gap-3 text-sm">		<ProgressBar.Root aria-label="Complete" value={100} className="w-24">			<ProgressBar.Indicator className="bg-success-600" />		</ProgressBar.Root>		Complete	</div> 	<div className="flex items-center gap-3 text-sm">		<ProgressBar.Root aria-label="In progress" value={45} className="w-24">			<ProgressBar.Indicator className="bg-warning-600" />		</ProgressBar.Root>		In Progress	</div></div>

Accessibility

ProgressBar.Root renders role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow, and omits aria-valuenow while indeterminate. The role needs a name: pass aria-label, or aria-labelledby that points at a visible label, or a screen reader announces a bare "progress bar".

Custom maximum value

Set a custom maximum value with the max prop. The progress bar renders the value as a percentage of that maximum.

import { ProgressBar } from "@ngrok/mantle/progress"; <ProgressBar.Root aria-label="Task progress" value={150} max={200}>	<ProgressBar.Indicator className="bg-purple-600" /></ProgressBar.Root>;

Indeterminate value

Set the value prop to "indeterminate" to show the progress bar in an indeterminate state. Currently, this displays as a progress bar at 0% but keeps accessibility attributes for screen readers.

import { ProgressBar } from "@ngrok/mantle/progress"; <ProgressBar.Root aria-label="Task progress" value="indeterminate">	<ProgressBar.Indicator className="bg-accent-600" /></ProgressBar.Root>;

Dynamic colors

Set the color of the ProgressBar.Indicator with the className prop to change colors based on the current progress value or application state.

import { ProgressBar } from "@ngrok/mantle/progress"; const Example = () => {	const [value, setValue] = useState(0); 	function computeIndicatorColor() {		switch (true) {			case value <= 20:				return "bg-danger-600";			case value <= 40:				return "bg-warning-600";			case value <= 60:				return "bg-accent-600";			case value <= 80:				return "bg-success-600";			default:				return "bg-fuchsia-600";		}	} 	return (		<form className="space-y-4">			<ProgressBar.Root aria-label="Task progress" value={value}>				<ProgressBar.Indicator className={computeIndicatorColor()} />			</ProgressBar.Root>			<label className="block space-y-1">				<p>Value:</p>				<input					type="range"					min={0}					max={100}					value={value}					onChange={(e) => setValue(Number(e.target.value))}				/>{" "}				({value}%)			</label>		</form>	);};

Composition

Compose the parts of a ProgressBar together to build your own:

ProgressBar.Root└── ProgressBar.Indicator

API Reference

ProgressBar.Root

A linear progress bar that displays completion progress with customizable colors.

The ProgressBar.Root accepts the following props in addition to the standard HTML div attributes.

PropTypeDefaultDescription
maxnumber100The maximum value of the progress bar. Must have a value greater than 0.
valuenumber | "indeterminate"0The current value of the progress bar. Must be between 0 and max; a value outside that range renders as indeterminate. If set to "indeterminate", the progress bar is considered indeterminate.
Data AttributeValueDescription
data-slot"progress-bar"The root element.
data-state"complete" | "indeterminate" | "loading"Set by Radix from value and max.
data-valuethe current valueAbsent while indeterminate.
data-maxthe maximum

ProgressBar.Indicator

The indicator portion of the progress bar that shows the completed progress. It positions itself from the current value relative to max.

All props from HTML div element.