Progress
Displays an indicator showing the completion progress of a task.
Default
Progress bars at various fill percentages.
0%
25%
50%
75%
100%
With Label
Progress bar displaying the current percentage.
Loading... 33%
Uploading... 67%
Complete 100%
Sizes
Small (4px), medium (8px), and large (12px) height variants.
Small (4px)
Medium (8px)
Large (12px)
Animated
Progress bar with a CSS fill animation.
Colors
Progress bars using semantic colors.
Primary
Success
Warning
Destructive
In Context
File upload progress example.
Uploading Files
3 of 5 files uploaded
design-mockup.fig 100%
icon-set.svg 100%
photo-hero.jpg 100%
presentation.pdf 62%
video-demo.mp4 Queued