Progress
Default Progress
Basic progress bars with different values
Colored Progress Bars
Progress bars with different status colors
Progress Variations
Progress with Labels
Show percentage inside the progress bar
Progress Sizes
Different height options for progress bars
Small (4px)
Default (8px)
Large (12px)
Extra Large (16px)
Striped & Animated Progress
Striped Progress
Progress bars with stripe pattern
Animated Striped
Progress bars with animated stripes
Multiple Bars & External Labels
Multiple Bars (Stacked)
Multiple progress bars stacked together
Storage Usage (40GB of 100GB)
Documents 20%
Photos 10%
Other 10%
Project Progress
Task Distribution
Progress with External Label
Labels positioned outside the progress bar
Progress Groups & Circles
Progress Group
Multiple progress bars with labels and values
HTML/CSS
85%
JavaScript
72%
React
68%
Node.js
55%
Python
40%
Circular Progress
SVG-based circular progress indicators
70%
Small
80%
Success
60%
Warning
35%
Danger
Step Progress
Step Progress
Multi-step progress indicator for wizards and processes
3
Payment Method
4
Confirmation
Real-World Examples
File Upload Progress
Progress tracking for file uploads
document.pdf
Complete
photo-gallery.zip
67%
project-files.zip
Queued
Profile Completion
User profile progress indicator
75%
Profile is 75% complete
Basic information
Profile picture
Email verified
Phone verification
Two-factor authentication
Project Status
Team project completion tracking
Website Redesign
92%
Mobile App Development
65%
Database Migration
48%
Bug Fixes Sprint
23%
Storage Usage
Disk space breakdown by category