Progress Circle Block

1import * as React from 'react';
2import { ProgressCircle } from '../progress-circle';
3 
4export function ProgressCircleUsage() {
5  const [progress, setProgress] = React.useState(0);
6 
7  React.useEffect(() => {
8    const startAnimation = () => {
9      const interval = setInterval(() => {
10        setProgress((prevProgress) => {
11          if (prevProgress >= 100) {
12            clearInterval(interval);
13            // Reset after 1 second when reaching 100%
14            setTimeout(() => {
15              setProgress(0);
16              startAnimation(); // Restart the animation cycle
17            }, 1000);
18            return 100;
19          }
20          // Add a random value between 10-20 percent
21          return Math.min(
22            100,
23            prevProgress + Math.floor(Math.random() * 11) + 10,
24          );
25        });
26      }, 300);
27 
28      return interval;
29    };
30 
31    const interval = startAnimation();
32 
33    return () => {
34      clearInterval(interval);
35    };
36  }, []);
37 
38  return (
39    <div className="flex w-full items-center justify-center p-4">
40      <div className="flex h-20 w-20 items-center justify-center rounded-md bg-black/80">
41        <ProgressCircle progress={progress} />
42      </div>
43    </div>
44  );
45}