Animated Progress Bar
Animated React progress bar component with smooth fill transitions, customizable colors, and multiple animation types using Motion.
Progress: 40%
Custom Color
Installation
npx smoothui-cli add animated-progress-barFeatures
- Smooth progress animations
- Customizable colors and styling
- Multiple animation types
- Built with Framer Motion
- Responsive design
- Accessibility support
Accessibility
Reduced Motion
This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the progress bar value changes instantly without animation.
Props
Animated Input
React text input with smooth focus animations, floating labels, and visual feedback. Modern form input component with Motion transitions for better UX.
Animated Stepper
Animated React stepper wizard with horizontal and vertical variants, progress line animations, and directional slide transitions.