Animated Progress

fill x spring

Progress bar with spring-animated fill width. From Animata.

progressbarspringanimata

Code

progress-bar.tsx

export function ProgressBar({ value = 72 }: { value?: number }) {
  return (
    <div className="h-3 w-full overflow-hidden rounded-full bg-muted">
      <div className="h-full rounded-full bg-brand transition-all duration-1000 ease-out"
        style={{ width: `${Math.min(100, Math.max(0, value))}%` }} />
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Animated Progress component and wire it to my accent.”