Progress
Progress bars with hard shadows and crisp edges. The filled portion uses the primary purple color against a white background, creating a clear visual indicator.
Basic Usage
Different Values
0%Empty
25%Quarter
50%Half
75%Three-quarters
100%Complete
Striped Pattern
Diagonal stripes
Animated stripes
Horizontal bars
Dotted pattern
Animated with Framer Motion
Spring animation
Elastic bounce
Pulse effect
Shimmer effect
Scale wave
Custom Colors
Success (Green)
Warning (Yellow)
Error (Red)
Info (Blue)
Gradient
Dynamic Stage Colors
Critical0%
0-30%: Red30-60%: Yellow60-90%: Blue90-100%: Green
Static examples
Battery Low15%
Storage Warning45%
Download Progress72%
Upload Complete100%
Animated Progress
Load on mount0%
Continuous loop0%
Indeterminate Loading
Sliding bar
Bouncing bar
Expanding bar
Use Cases
File Upload
document.pdf - Uploading...
Course Progress
Introduction to Design Systems
9 of 20 lessons completed
Storage Usage
15 GB of 20 GB used
Custom Height
h-4 (small)
h-6 (default)
h-8 (large)
h-10 (extra large)