first

src/workspaces/components/CircularProgress/circular-progress.css

@@ -0,0 +1,45 @@
+.circular-progress {
+  --size: 250px;
+  --half-size: calc(var(--size) / 2);
+  --stroke-width: 20px;
+  --radius: calc((var(--size) - var(--stroke-width)) / 2);
+  --circumference: calc(var(--radius) * pi * 2);
+  --dash: calc((var(--progress) * var(--circumference)) / 100);
+  animation: progress-animation 5s linear 0s 1 forwards;
+}
+
+.circular-progress circle {
+  cx: var(--half-size);
+  cy: var(--half-size);
+  r: var(--radius);
+  stroke-width: var(--stroke-width);
+  fill: none;
+  stroke-linecap: round;
+}
+
+.circular-progress circle.bg {
+  stroke: #ddd;
+}
+
+.circular-progress circle.fg {
+  transform: rotate(-90deg);
+  transform-origin: var(--half-size) var(--half-size);
+  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
+  transition: stroke-dasharray 0.3s linear 0s;
+  stroke: #5394fd;
+}
+
+@property --progress {
+  syntax: '<number>';
+  inherits: false;
+  initial-value: 0;
+}
+
+@keyframes progress-animation {
+  from {
+    --progress: 0;
+  }
+  to {
+    --progress: 100;
+  }
+}

src/workspaces/components/CircularProgress/index.tsx

@@ -0,0 +1,15 @@
+import { Progress } from '@/components/ui/progress';
+
+export const CircularProgress = ({ progress = 50 }) => {
+  return (
+    <div className="flex flex-col items-center justify-center gap-2 border-[0.8rem] rounded-full border-primary h-96 w-96">
+      <h3 className="text-4xl">
+        {progress || '00.00'}
+        <span className="text-xl">%</span>
+      </h3>
+      <div className="w-full px-16">
+        <Progress value={progress || 0} />
+      </div>
+    </div>
+  );
+};