Progress
Progress bars: eased, segmented and indeterminate.
Progress bars show how far along a task is: uploads, quotas, onboarding. Cuelark eases the fill to each new value with GSAP, offers a segmented style whose cells light up in a cascade, and an indeterminate state for unknown durations.
Preview
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/progress.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/progress.
Builds on: motion
Usage
import { Progress } from "@/components/ui/progress";
<Progress value={64} aria-label="Upload" />Motion
The fill eases to new values (GSAP), and newly lit segments pulse in a cascade.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
Progress
Extends Radix Progress.Root.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | 0 | 0–max, or null for indeterminate. |
| segments | number | — | Split into cells. |
| size | "sm" | "md" | "lg" | "md" | Bar thickness. |
Accessibility
- role=progressbar with aria-valuenow; give it an aria-label.
- Indeterminate bars omit aria-valuenow.
FAQ
Also searched as: react progress bar · segmented progress · shadcn progress · upload progress bar · loading bar