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

Standard progress bar using the theme foreground colour. The label updates with the current percentage — use the Increase button in the panel to step the value.

Custom Color

Pass color to override the fill — any CSS colour works. The spring animation and label behave the same as the default.

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