Progress
Progress indicator with determinate/indeterminate modes, labels, and variant system including gradients
Progress
Display linear progress indicators for determinate and indeterminate states, with variants, sizes, shapes, stripes, glow and custom labeling.
Basic progress
Use the value prop (0–100) for determinate progress. A value of undefined or the indeterminate prop can be used for loading states.
Default (0%)
25% complete
50% complete
75% complete
Complete (100%)
Sizes
Use size to control bar thickness:xs, sm, md, lg, xl.
Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Variants
Choose semantic styles using variant, including default, primary, secondary, accent, success, warning, error, info, gradient, striped and glass.
Default
Primary
Secondary
Accent
Success
Warning
Error
Info
Gradient
Striped
Glass
Shapes
Use shape to tweak radius:rounded (default), pill, square.
Rounded (default)
Pill
Square
Labels
Show numeric values or custom labels with showValue, label and labelPosition (inside, outside, top).
Inside label
Outside label
Top label
Custom label
Striped patterns
Enable striped for patterned bars and stripedAnimated for animated stripes.
Static stripes
Animated stripes
Gradient + animated stripes
Glow
Add subtle focus with glow, especially for primary or critical indicators.
Primary with glow
Success with glow
Gradient with glow
Indeterminate loading
Use indeterminate for unknown or streaming progress states.
Primary loading
Gradient loading
Success loading with stripes
Custom colors
Override colors with color and trackColor for brand-specific progress indicators.
Custom purple
Custom orange
Custom track color
Real-world examples
Combine progress with labels and cards for uploads, downloads, skill bars, system resources and project tracking.
Uploads, skills & status
Uploading document.pdf
0%0.0 MB / 250 MB
Downloading video.mp4
0%0 MB / 1500 MB
Skill levels
System resources
Project progress
Usage Guidelines
When to Use
- File uploads
- Multi-step processes
- Loading states
Accessibility
- progressbar role with value
- aria-valuemin/max/now announced
Performance
- CSS animations
- RAF-based updates for smooth motion
Common Mistakes
- Not updating value smoothly
- Indeterminate for determinate operations
Frequently Asked Questions
Related Components
View allContextual messaging with severity variants, dismissal, icons, and action button integration
Backdrop overlay for modals with blur effects and click-to-close functionality
Full-page status displays for success, error, and HTTP status codes (404, 403, 500) with action buttons
Material-style snackbar notifications with auto-dismiss, action buttons, and positioning