diff options
| -rw-r--r-- | src/client/views/nodes/ChatBox/ChatBox.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/ChatBox/ProgressBar.scss | 54 | ||||
| -rw-r--r-- | src/client/views/nodes/ChatBox/ProgressBar.tsx | 18 |
3 files changed, 44 insertions, 30 deletions
diff --git a/src/client/views/nodes/ChatBox/ChatBox.tsx b/src/client/views/nodes/ChatBox/ChatBox.tsx index fdc0e3a17..383be0bb7 100644 --- a/src/client/views/nodes/ChatBox/ChatBox.tsx +++ b/src/client/views/nodes/ChatBox/ChatBox.tsx @@ -500,7 +500,7 @@ export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { {this.isUploadingDocs && ( <div className="uploading-overlay"> <div className="progress-container"> - <ProgressBar progress={this.uploadProgress} /> + <ProgressBar /> <div className="step-name">{this.currentStep}</div> </div> </div> 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 } diff --git a/src/client/views/nodes/ChatBox/ProgressBar.tsx b/src/client/views/nodes/ChatBox/ProgressBar.tsx index 765ddbef5..0aa07213f 100644 --- a/src/client/views/nodes/ChatBox/ProgressBar.tsx +++ b/src/client/views/nodes/ChatBox/ProgressBar.tsx @@ -1,17 +1,13 @@ import React from 'react'; -import './ProgressBar.scss'; // Create this CSS file for styling +import './ProgressBar.scss'; -interface ProgressBarProps { - progress: number; -} - -export const ProgressBar: React.FC<ProgressBarProps> = ({ progress }) => { +export const ProgressBar: React.FC = () => { 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 className="spinner-container"> + <div className="spinner"> + <div className="double-bounce1"></div> + <div className="double-bounce2"></div> + </div> </div> ); }; |