Progress
Displays an indicator showing the completion progress of a task.
Installation
import { Progress } from "@gradeui/ui"Usage
Examples
Animated
0%
With Label
67%
With Label
85%
Multiple Progress Bars
92%
45%
78%
Upload Progress
2.4 MB / 8 MB
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | The current progress value (0-100). |
| max | number | 100 | The maximum value. |
| className | string | - | Additional CSS classes. |
Accessibility
- Built on Radix UI Progress for accessibility
- ARIA progressbar role with proper attributes
- Announce progress changes to screen readers
- Pair with visible text labels for context
Sidecar
The Markdown sidecar Studio (and the Grade MCP server, when it ships) reads to understand this component — frontmatter, when- to-use guidance, and canonical examples. Authored once at packages/ui/components/ui/progress.md and shipped inside the published @gradeui/ui tarball.
---
name: Progress
import: "@gradeui/ui"
props:
- value?: number (0–100) — percent complete
- max?: number (default 100)
- className?: string
when_to_use: Determinate progress — file uploads, multi-step forms, quota meters. Indeterminate state → use Skeleton or animated Loader icon.
composes_with: [Card (as a section), Badge (showing % next to it), Label (describing what's loading)]
aliases: [progress, progress view, progress indicator, progress bar, determinate progress, loading bar, completion bar]
---
```jsx
<Progress value={42} />
```