made the progress cooler (double bounce)

1 files changed, 36 insertions, 18 deletions

diff --git a/src/client/views/nodes/ChatBox/ProgressBar.scss b/src/client/views/nodes/ChatBox/ProgressBar.scss
index dcde666de..ff5be4a38 100644
--- a/src/client/views/nodes/ChatBox/ProgressBar.scss
+++ b/src/client/views/nodes/ChatBox/ProgressBar.scss
@@ -1,30 +1,43 @@
-.progress-circle {
+.spinner-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+}
+
+.spinner {
+    width: 60px;
+    height: 60px;
     position: relative;
-    width: 120px;
-    height: 120px;
+    margin-bottom: 20px; // Space between spinner and text
 }
 
-.progress-ring {
-    transform: rotate(-90deg);
+.double-bounce1,
+.double-bounce2 {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #4a90e2;
+    opacity: 0.6;
     position: absolute;
     top: 0;
     left: 0;
+    animation: bounce 2s infinite ease-in-out;
 }
 
-.progress-ring__circle {
-    transition: 0.35s stroke-dashoffset;
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
+.double-bounce2 {
+    animation-delay: -1s;
 }
 
-.progress-text {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 24px;
-    font-weight: bold;
-    color: #000;
+@keyframes bounce {
+    0%,
+    100% {
+        transform: scale(0);
+    }
+    50% {
+        transform: scale(1);
+    }
 }
 
 .uploading-overlay {
@@ -41,11 +54,16 @@
 }
 
 .progress-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     text-align: center;
 }
 
 .step-name {
-    margin-top: 10px;
     font-size: 18px;
     color: #333;
+    text-align: center;
+    width: 100%;
+    margin-top: -10px; // Adjust to move the text closer to the spinner
 }