1 files changed, 30 insertions, 0 deletions
diff --git a/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.tsx b/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.tsx
new file mode 100644
index 000000000..240862f8b
--- /dev/null
+++ b/src/client/views/nodes/chatbot/chatboxcomponents/ProgressBar.tsx
@@ -0,0 +1,30 @@
+/**
+ * @file ProgressBar.tsx
+ * @description This file defines the ProgressBar component, which displays a loading spinner
+ * to indicate progress during ongoing tasks or processing. The animation consists of two
+ * bouncing elements that create a pulsating effect, providing a visual cue for active progress.
+ * The component is styled using the accompanying `ProgressBar.scss` for smooth animation.
+ */
+
+import React from 'react';
+import './ProgressBar.scss';
+
+/**
+ * ProgressBar is a functional React component that displays a loading spinner
+ * to indicate progress or ongoing processing. It uses two bouncing elements
+ * to create a smooth animation that represents an active state.
+ *
+ * The animation consists of two divs (`double-bounce1` and `double-bounce2`),
+ * each of which will bounce in and out of view, creating a pulsating effect.
+ */
+export const ProgressBar: React.FC = () => {
+    return (
+        <div className="spinner-container">
+            {/* Spinner div containing two bouncing elements */}
+            <div className="spinner">
+                <div className="double-bounce1"></div> {/* First bouncing element */}
+                <div className="double-bounce2"></div> {/* Second bouncing element */}
+            </div>
+        </div>
+    );
+};