Progress

How far along a task is. Omit the value for an indeterminate bar, which sweeps rather than fills — the one honest way to say "working, duration unknown".

src/components/ui/progress.tsx

About

From the component's own source, where it was written.

How far along a task is.

With no value it becomes indeterminate: the bar animates position, which is the one honest way to say "working, duration unknown". It stops under prefers-reduced-motion, where the track alone still communicates progress.

Install

npx astralyx-ui add progress

Usage

import { Progress } from '@/components/ui/progress'

<Progress value={72} showValue />
<Progress />  {/* indeterminate */}

Composer

Change the props and the source below follows.

72%

Props

size

color

value

showValue

tsx

<Progress value={72} showValue />

Examples

Determinate

tsx

<Progress value={35} showValue />

Live

tsx

<Progress value={value} showValue />

Indeterminate

tsx

<Progress />

Sizes and colours

tsx

<Progress size="lg" color="green" value={60} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Progress`

How far along a task is.

Extends Omit<ComponentProps<'div'>, 'color'>.

Prop	Type	Default	Description
size	'sm' \| 'default' \| 'lg'	'default'	Track thickness.
value	number	—	0–100, clamped. Omit entirely for an indeterminate bar.
color	keyof typeof colorSet	'neutral'	Fill colour, from a named set or any CSS colour.
tint	string	'neutral'	Fill colour, from a named set or any CSS colour.
showValue	boolean	false	Render the percentage beside the track.

Functions

Function	Signature	Description
progressVariants	(props?: { size?: 'sm' \| 'default' \| 'lg' }) => string	How far along a task is.