/**
 * @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>
    );
};