Back to Registry

Animated Progress

feedback

Spring-driven progress bars that animate to target values.

Colorblue-500
Width
Shadow

Live Preview

Design0%
Development0%
Testing0%
Install via CLI
npx shadcn@latest add https://kinetik.dev/r/animated-progress.json

Requires shadcn CLI. Auto-installs deps and copies the component into your project.

Manual Install
npm add framer-motion

Then copy the source code below into your project.

Usage
import { AnimatedProgress } from '@/app/components/animated-progress';

Source

'use client';

export function AnimatedProgress() {
  // copy from registry component source
}

Dependencies

framer-motion