1 files changed, 17 insertions, 0 deletions
diff --git a/src/client/views/nodes/ChatBox/ProgressBar.tsx b/src/client/views/nodes/ChatBox/ProgressBar.tsx
new file mode 100644
index 000000000..765ddbef5
--- /dev/null
+++ b/src/client/views/nodes/ChatBox/ProgressBar.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import './ProgressBar.scss'; // Create this CSS file for styling
+
+interface ProgressBarProps {
+    progress: number;
+}
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({ progress }) => {
+    return (
+        <div className="progress-circle">
+            <svg className="progress-ring" width="120" height="120">
+                <circle className="progress-ring__circle" stroke="currentColor" strokeWidth="4" fill="transparent" r="56" cx="60" cy="60" style={{ strokeDasharray: 352, strokeDashoffset: 352 - (progress / 100) * 352 }} />
+            </svg>
+            <div className="progress-text">{Math.round(progress)}%</div>
+        </div>
+    );
+};