Animated Progress Bar

1"use client";
2 
3import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
4import { animate, motion, useMotionValue, useTransform } from "framer-motion";
5import { useEffect } from "react";
6 
7export function AnimatedProgress() {
8  const progress = useMotionValue(0);
9  const width = useTransform(progress, [0, 100], ["0%", "100%"]);
10  const displayProgress = useTransform(progress, (v) => `${Math.round(v)}%`);
11 
12  useEffect(() => {
13    const animation = animate(progress, 75, {
14      duration: 2,
15      ease: "easeOut",
16    });
17 
18    return animation.stop;
19  }, [progress]);
20 
21  return (
22    <div className="flex items-center justify-center p-12">
23      <Card className="w-80">
24        <CardHeader>
25          <CardTitle className="text-lg">Upload Progress</CardTitle>
26        </CardHeader>
27        <CardContent>
28          <div className="h-2 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-800">
29            <motion.div
30              style={{ width }}
31              className="h-full bg-gradient-to-r from-accent to-slate-500"
32            />
33          </div>
34          <motion.p className="mt-2 text-right text-sm text-[var(--foreground)]/70">
35            {displayProgress}
36          </motion.p>
37        </CardContent>
38      </Card>
39    </div>
40  );
41}