如何在react中创建函数进度条？

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

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

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prevProgress) => {
        if (prevProgress === 100) {
          clearInterval(timer);
          return 0;
        }
        return prevProgress + 10;
      });
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div className="progress-bar">
      <div className="progress" style={{ width: `${progress}%` }}></div>
    </div>
  );
};

export default ProgressBar;

.progress-bar {
  width: 200px;
  height: 20px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #00bcd4;
  transition: width 0.5s ease-in-out;
}

import React from 'react';
import ProgressBar from './ProgressBar';

const App = () => {
  return (
    <div>
      <h1>函数进度条示例</h1>
      <ProgressBar />
    </div>
  );
};

export default App;