Progress
Enhanced progress indicator with smooth animations, multiple variants, and real-time updates. Perfect for showing task completion, loading states, and data visualization.
Unlock Advanced Progress Features
Get access to powerful pro features that enhance your progress component with advanced capabilities, premium styling options, and optimized performance.
Pro Features
Unlock advanced capabilities with the Pro version
Accessible by Default
Built on @radix-ui/react-progress, so progressbar semantics and aria-value attributes come for free.
Smooth Fill Transition
The indicator animates value changes with a built-in transition-all effect.
Tailwind-First Theming
Track height, radius, and colors are fully controllable through className.
Drop-in Compatible
Ships as MoonUIProgressPro with a backward-compatible Progress alias export.
Installation
Install via CLI
npx @moontra/moonui-cli add progressUsage
Basic Usage
Pro Usage
Examples
Basic Progress
Different progress values
Variants
Different visual styles
Sizes
Different progress bar sizes
With Labels
Progress with value labels
Animated Progress
Progress with animation controls
Step Progress
Multi-step progress indicator
Installation Progress
Step 1 of 5File Upload
Progress for file uploads
document.pdf
2.4 MB
Real-time Metrics
Live updating progress bars
Radius, Indicator Colour and Indeterminate
Five documented props that shape the bar independently of value: radius controls the corner rounding of the track, animation sets the fill transition speed, indicatorVariant colours the fill separately from the track's variant, labelClassName styles the value label, and indeterminate switches to a looping animation for work with no measurable percentage (aria-valuenow is omitted, so assistive tech announces it as busy rather than 0%).
Gradient Progress Bars
Multiple gradient styles with smooth animations
Segmented Progress
Multi-step progress with interactive segments
Project Setup Progress
3 of 8 stepsCircular Progress
Circular progress indicators with gradients
Progress with Success States
Progress that shows completion animations and success states
Live Upload Progress
File upload queue with real-time progress tracking
File Upload Queue
Multi-channel Progress
Multiple progress bars tracking different metrics simultaneously
Network Performance Monitor
Performance Dashboard
System performance metrics with color-coded progress indicators
System Performance
Goal Tracking Progress
Progress towards goals with milestones and achievement indicators