progressBar

import React, { useState, useEffect } from 'react';

function ProgressBar() {

  const [progress, setProgress] = useState(0);

  useEffect(() => {

    // Stop the interval if it hits 100%

    if (progress >= 100) return;

    const timer = setInterval(() => {

      setProgress((prevProgress) => {

        const nextProgress = prevProgress + 10;

        return nextProgress >= 100 ? 100 : nextProgress;

      });

    }, 1000); // Runs every 1 second (1000ms)

    // Clear the interval when the component unmounts or progress changes

    return () => clearInterval(timer);

  }, [progress]);

  // Inline styles for clean styling and smooth width transitions

  const containerStyle = {

    width: '100vw', // Takes full width of the screen

    backgroundColor: 'black',

    height: '20px',

  };

  const fillStyle = {

    width: `${progress}%`, // Dynamically updates width

    backgroundColor: '#4caf50', // Green progress bar

    height: '100%',

  };

  return (

    <div>

      <div style={containerStyle}>

        <div style={fillStyle} />

      </div>

      <p style={{ textAlign: 'center', marginTop: '10px' }}>

        Progress: {progress}%

      </p>

    </div>

  );

}

export default ProgressBar;