基于React和antd实现自定义进度条的示例代码

import React, { useState, useEffect } from "react";
import { Tooltip } from "antd";

const BasedOnReactSelfDefinedProgressBar: React.FC = () => {
  const [progressData, setProgressData] = useState([
    { percent: 10, color: "red" },
    { percent: 10, color: "green" },
    { percent: 10, color: "red" },
    { percent: 10, color: "green" },
    { percent: 10, color: "green" },
  ]);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgressData(prev => 
        prev.map(item => ({
         ...item,
          percent: Math.min(prev.reduce((sum, cur) => sum + cur.percent, 0) + 10, 100)
        }))
      );
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div
      style={{
        width: "100%",
        height: "10px",
        background: "#e0e0e0",
        position: "relative",
        borderRadius: "10px",
        overflow: "hidden"
      }}
    >
      {progressData.map((item, index) => (
        <Tooltip 
          key={index} 
          title={`岩石类型: ${item.color === 'red'? '火成岩' : '沉积岩'}\n占比: ${item.percent}%`}
        >
          <div
            style={{
              width: `${100 / progressData.length}%`,
              height: "100%",
              background: item.color,
              position: "absolute",
              left: `${(100 / progressData.length) * index}%`,
              borderRadius: '5px',
              transition: 'width 0.3s ease'
            }}
          />
        </Tooltip>
      ))}
    </div>
  );
};

export default BasedOnReactSelfDefinedProgressBar;