Animated Progress Bar

1import { motion, useReducedMotion } from "motion/react";
2 
3export interface AnimatedProgressBarProps {
4  barClassName?: string;
5  className?: string;
6  color?: string;
7  label?: string;
8  labelClassName?: string;
9  value: number; // 0-100
10  /**
11   * To replay the animation, change the React 'key' prop on this component from the parent.
12   */
13}
14 
15const MIN_PROGRESS_VALUE = 0;
16const MAX_PROGRESS_VALUE = 100;
17 
18const SPRING = {
19  damping: 10,
20  duration: 0.25,
21  mass: 0.75,
22  stiffness: 100,
23  type: "spring" as const,
24};
25 
26export default function AnimatedProgressBar({
27  value,
28  label,
29  color = "#6366f1",
30  className = "",
31  barClassName = "",
32  labelClassName = "",
33}: AnimatedProgressBarProps) {
34  const shouldReduceMotion = useReducedMotion();
35 
36  return (
37    <div className={`w-full ${className}`}>
38      {label ? (
39        <div className={`mb-1 font-medium text-sm ${labelClassName}`}>
40          {label}
41        </div>
42      ) : null}
43      <div className="relative h-3 w-full overflow-hidden rounded border bg-background">
44        <motion.div
45          animate={{
46            width: `${Math.max(MIN_PROGRESS_VALUE, Math.min(MAX_PROGRESS_VALUE, value))}%`,
47          }}
48          className={`h-full rounded bg-background ${barClassName}`}
49          initial={{ width: MIN_PROGRESS_VALUE }}
50          style={{ backgroundColor: color }}
51          transition={shouldReduceMotion ? { duration: 0 } : SPRING}
52        />
53      </div>
54    </div>
55  );
56}