animated-circular-progress-bar

1"use client";
2 
3import { useEffect, useState } from "react";
4 
5import { AnimatedCircularProgressBar } from "@/components/magicui/animated-circular-progress-bar";
6 
7export function AnimatedCircularProgressBarDemo() {
8  const [value, setValue] = useState(0);
9 
10  useEffect(() => {
11    const handleIncrement = (prev: number) => {
12      if (prev === 100) {
13        return 0;
14      }
15      return prev + 10;
16    };
17    setValue(handleIncrement);
18    const interval = setInterval(() => setValue(handleIncrement), 2000);
19    return () => clearInterval(interval);
20  }, []);
21 
22  return (
23    <AnimatedCircularProgressBar
24      max={100}
25      min={0}
26      value={value}
27      gaugePrimaryColor="rgb(79 70 229)"
28      gaugeSecondaryColor="rgba(0, 0, 0, 0.1)"
29    />
30  );
31}