Animated Progress Bar

Animated React progress bar component with smooth fill transitions, customizable colors, and multiple animation types using Motion.

Installation

npx smoothui-cli add animated-progress-bar

Features

• 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

Created by

Edu Calvo

Powered by

motion.dev