blob: 240862f8b80b03c861cab2449cfef078bb9dc2cb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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>
);
};
|