Progress Bar
A flexible progress bar component for displaying progress or loading states. Supports both linear and circular variants with different sizes, colors, and optional value display.
Installation
Import
Usage
The ProgressBar component is essential for showing task progress, file uploads, form completion, loading states, and any operation with a measurable duration. Use linear progress for horizontal layouts and circular progress for compact spaces or when you want a more visual indicator. Use indeterminate mode when the duration is unknown. Show values when users need to see exact percentages.
Design Guidelines
The progress bar uses a clean, minimal design that clearly communicates progress. Linear bars work well in forms, file uploads, and step indicators. Circular progress is ideal for buttons, cards, and compact spaces. The component supports smooth animations and provides clear visual feedback. Choose colors that match your application's semantic meaning (success for completion, warning for attention needed, etc.).
Basic Usage
Simple linear progress bar
With Value Display
Progress bar showing the current percentage
Indeterminate Progress
Progress bar for unknown duration operations
Circular Progress
Circular progress indicator
Circular with Value
Circular progress showing percentage
Different Sizes
Progress bars in various sizes
Different Colors
Progress bars with different color variants
Circular Sizes
Circular progress indicators in different sizes
API Reference
Comprehensive API documentation for all exports and utilities. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
value | number | - | The current progress value (0-100). Required unless indeterminate is true |
variant | "linear" | "circular" | "linear" | Display variant: linear bar or circular indicator |
progressSize | "sm" | "md" | "lg" | "xl" | "md" | Size of the progress bar |
color | "primary" | "secondary" | "success" | "warning" | "destructive" | "neutral" | "primary" | Color variant for the progress indicator |
showValue | boolean | false | Whether to display the progress percentage |
indeterminate | boolean | false | Whether the progress is indeterminate (unknown duration) |
className | string | — | Additional CSS classes to apply to the component |