Progress

Visually represents task completion or system loading state through a linear indicator.

0% complete

Code

Installation

npx shadcn@latest add progress

Basic Example

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

<Progress value={50} />
<Progress value={75} />
<Progress value={100} />

Controlled

const [progress, setProgress] = useState(0)

<Progress value={progress} />

Reference

Props

Prop	Type	Default	Description
value	number	0	Progress value (0-100)
max	number	100	Maximum value

Progress Values

25%

50%

75%

100%

Usage Guidelines

When to Use

Use progress bars to show task completion, file upload progress, loading states, or any process that has a defined beginning and end. They provide clear visual feedback about how much work remains.

Progress bars are most effective when the task duration is predictable or when you can provide meaningful progress updates. Avoid using them for indeterminate loading states.

Best Practices

Always show progress as a percentage when meaningful
Update progress regularly for long-running tasks
Use for determinate progress, not indeterminate loading
Consider showing time remaining for better UX
Provide context about what is being processed

Accessibility

Progress bars should include ARIA attributes to communicate progress to screen readers. Use aria-valuenow, aria-valuemin, and aria-valuemax to provide current, minimum, and maximum values.

Consider providing text-based progress information alongside the visual bar for users who may have difficulty perceiving color or the visual representation.

Rhetoric-ds