Animated Progress Bar

A progress bar component with smooth animations and customizable styling.

~0.4 kB

Last updated: March 7, 2026

Progress: 40%

Custom Color

Installation

npx smoothui-cli add animated-progress-bar

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

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 StepperNew

A step-by-step wizard component with animated transitions between steps.