Browse components
Progress
Linear and circular progress with a spring-animated value and counting label, a moving sheen, and indeterminate slide and spin states.
Installation
npx shadcn@latest add @glint-ui/progressFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/progress.json
Usage
import { Progress } from "@/components/ui/progress";
<Progress label="Uploading" value={progress} />
<Progress variant="circular" value={null} label="Indexing" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 64 | Current value (0 to max). Pass null for indeterminate. |
| indeterminate | boolean | false | Demo control: sends value={null}. |
| variant | "linear" | "circular" | "linear" | Bar or ring. |
| size | "sm" | "md" | "lg" | "md" | Thickness or diameter. |
| label | string | "Building your workspace" | Visible label and accessible name. |
| showValue | boolean | true | Show the animated percentage. |
| max | number | 100 | Value at 100%. |
| className | string | — | Extra classes for the root element. |