Progress
Progress indicators styled with the Tinted Trays theme. Features subtle inset shadows on the track and clean indicators.
Basic Progress
Simple progress bar with softer chart-3 color, suitable for white canvas backgrounds.
Size Variants
Progress bars can have different heights for various use cases.
Animated Progress
Progress bar with smooth animation as the value changes.
Loading...0%
Progress Tray
The ProgressTray variant uses primary color, wrapping the progress bar in its own tray container.
Storage Used33%
Memory67%
CPU Usage89%
Color Variants
Different color options for semantic or aesthetic purposes.
Segmented Progress
Multi-step progress indicator showing completion stages.
Order ProgressStep 2 of 4
PlacedConfirmedShippedDelivered
Step Indicator
Combining progress with step icons for onboarding or wizard flows.
Account created
Profile setup
Connect services
Ready to go
Edge States
Progress bar at 0% and 100% completion states.
0%
100%