Uploading document.pdf0%
Feedbackstable
Progress
An accessible progress indicator that displays the completion status of a task or operation.
Installation
Install the component directly into your project using the Pittaya CLI.
npx pittaya@latest add progress
When to use
Use Progress when you need to display the completion status of a task, such as file uploads, form completion, multi-step processes, or any operation with a measurable progress percentage.
The component is ideal for providing visual feedback to users about ongoing operations, helping them understand how much of a task has been completed and how much remains.
Best practices
- Always provide a label or description to indicate what progress is being tracked.
- Use the appropriate variant to communicate the nature of the operation (default for standard tasks, success for completed operations, destructive for critical tasks).
- Display the percentage value alongside the progress bar for better clarity when possible.
Accessibility
The Progress component uses Radix UI's @radix-ui/react-progress primitive, which provides proper ARIA attributes including role="progressbar", aria-valuemin, aria-valuemax, and aria-valuenow to ensure screen readers can accurately announce the progress status.
When implementing, consider adding aria-label or aria-labelledby to provide context about what is progressing, especially in cases where multiple progress indicators are visible simultaneously.
Examples
Combine variants and sizes to meet your needs.
Basic usage
A simple progress bar showing 65% completion.
File upload simulation
An animated progress bar simulating a file upload operation with automatic progression.
Progress variants
Different visual styles for various use cases and contexts.
Multi-step form progress
Progress indicator for a multi-step form showing current completion status.
Properties
TSX interface that combines variants and default attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | The current progress value (0-100). Controls the fill percentage of the progress bar. |
variant | 'default' | 'secondary' | 'destructive' | 'success' | 'default' | Defines the visual style of the progress bar. Use 'default' for standard operations, 'success' for completed tasks, 'destructive' for critical operations, or 'secondary' for secondary operations. |
max | number | 100 | The maximum progress value. Defaults to 100 for percentage-based progress. |
className | string | — | Additional CSS classes to apply to the progress root element. |