circular-progress-interactive-demo

1"use client";
2 
3import * as React from "react";
4import { Button } from "@/registry/bases/base/ui/button";
5import {
6  CircularProgress,
7  CircularProgressIndicator,
8  CircularProgressRange,
9  CircularProgressTrack,
10  CircularProgressValueText,
11} from "@/registry/bases/base/ui/circular-progress";
12 
13export default function CircularProgressControlledDemo() {
14  const [uploadProgress, setUploadProgress] = React.useState<number | null>(0);
15  const [isUploading, setIsUploading] = React.useState(false);
16  const intervalRef = React.useRef<NodeJS.Timeout | null>(null);
17 
18  const onUploadStart = React.useCallback(() => {
19    setIsUploading(true);
20    setUploadProgress(0);
21  }, []);
22 
23  const onUploadReset = React.useCallback(() => {
24    setUploadProgress(0);
25    setIsUploading(false);
26    if (intervalRef.current) {
27      clearInterval(intervalRef.current);
28      intervalRef.current = null;
29    }
30  }, []);
31 
32  React.useEffect(() => {
33    if (isUploading) {
34      intervalRef.current = setInterval(() => {
35        setUploadProgress((prev) => {
36          if (prev === null) return 0;
37          if (prev >= 100) {
38            if (intervalRef.current) {
39              clearInterval(intervalRef.current);
40              intervalRef.current = null;
41            }
42            setIsUploading(false);
43            return 100;
44          }
45          return Math.min(100, prev + Math.random() * 15);
46        });
47      }, 200);
48    }
49 
50    return () => {
51      if (intervalRef.current) {
52        clearInterval(intervalRef.current);
53        intervalRef.current = null;
54      }
55    };
56  }, [isUploading]);
57 
58  return (
59    <div className="flex flex-col items-center gap-6">
60      <div className="flex items-center gap-6">
61        <CircularProgress
62          value={uploadProgress}
63          min={0}
64          max={100}
65          size={80}
66          thickness={6}
67        >
68          <CircularProgressIndicator>
69            <CircularProgressTrack />
70            <CircularProgressRange />
71          </CircularProgressIndicator>
72          <CircularProgressValueText className="font-semibold text-base" />
73        </CircularProgress>
74        <div className="flex flex-col gap-2">
75          <div className="font-medium text-sm">Upload Progress</div>
76          <div className="text-muted-foreground text-xs">
77            Status:{" "}
78            {isUploading
79              ? "Uploading..."
80              : uploadProgress === 100
81                ? "Complete"
82                : "Ready"}
83          </div>
84// … truncated