Progress

Progress with motion: the bar glides to each value on a spring, runs while the length is unknown, shines when it's done, and can show its percentage on odometer wheels.

$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-progress.json

Storage used64%

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/motion-progress.json

Adds components/dashral/motion/progress.tsx, the Progress it builds on (in components/dashral/), motion and the motion files every motion component shares. With the registry in your components.json:

$ pnpm dlx shadcn@latest add @dashral/motion-progress

Usage

The same as Progress, imported from components/dashral/motion/: swap the import and it moves.

example.tsx

1import { Progress } from "@/components/dashral/motion/progress"
2
3<Progress value={uploaded} showValue aria-label="Uploading" />
4<Progress value={null} aria-label="Preparing export" />

Examples

An upload queue

Each file waits with a running highlight, glides through its percentage on wheels, shines when it lands and pops a tick in.

Uploads

Q3 report.pdf
Team photo.jpg
Roadmap.key

A getting-started checklist

Tick steps, or sweep down the boxes, and the bar glides to match; the last one turns it green and shines across.

Compared with Default

Default

The bar slides to each value in CSS; there's no state for work of unknown length.

Motion

The bar glides to each value on a spring, runs a highlight while the length is unknown, shines once when it's done, and showValue puts the percentage on odometer wheels.

How the two editions differ in general, and which to use where: Motion.

API reference

Every prop of Progress, and every attribute of the element it renders. What the Motion edition adds is marked Motion.

Progress

Also takes every prop of Radix Progress(opens in a new tab).

Prop	Type	Default
`showValue`	`boolean` `Motion` The percentage at the bar's end, on odometer wheels.	`false`
`value`	`number \| null` 0–100; null for indeterminate.	—
`color`	`"primary" \| "neutral" \| "info" \| "success" \| "warning" \| "destructive" \| "highlight"` The bar; the track is a pale version of it.	`"primary"`
`classNames`	`{ indicator }` Classes for the bar.	—

A value of null shows work of unknown length, a highlight running along the track.

Motion

The bar fills from the start when it first shows, then glides to each new value on a spring with no overshoot.
With a value of null, a highlight runs back and forth along the track for work of unknown length.
Reaching the end sends a soft shine across the bar, once.
showValue writes the percentage at the bar's end on odometer wheels, each digit turning as far as it travelled.
With reduced motion the bar moves at once, and nothing runs or shines.