React 实现自定义进度条（类似于ant design中的progress）

一 说明

antd中的进度条不太符合项目需求，因此需要自己实现一款进度条。具体功能有：**颜色的自定义、最大百分比可以超过100%，自定义百分比文字标签的位置或者不显示标签。**其他功能可以自定义拓展。

二 实现源码

1.react 代码

import React, {useEffect, useState} from 'react';
import styles from './index.module.less';

interface IProgressBarProps {
  percent: number; // 当前进度值
  maxPercent?: number; // 最大百分比（进度）
  color?: string; // 进度值颜色
  showText?: "right" | "center"  // 标签显示在哪里：右边、中间

}

const ProgressBar = (props: IProgressBarProps) => {
  const {percent, color, maxPercent, showText} = props;
  const [textStyle, setTextStyle] = useState<string>("progressTextCenter");
  const newMaxPercent = maxPercent ? maxPercent : 100; // 判断最大百分比
  const progressPercentage = (percent / newMaxPercent) * 100; // 计算百分比
  const newColor = color ? color : "#1677ff"; // 判断颜色(默认为#1677ff)

  useEffect(() => {
    switch (showText) {
      case "right":
        setTextStyle("progressTextRight");
        break;
      case "center":
        setTextStyle("progressTextCenter");
        break;
      default:
        setTextStyle("");
        break;
    }
  }, [showText])

  return (
    <div className={styles.outerContainer}>
      <div className={styles.progressContainer}>
        <div className={styles.progressBar} style={
  
  {width: `${progressPercentage}%`, backgroundColor: newColor}}></div>
      </div>
      {textStyle ? <div className={styles[textStyle]}>{percent}%</div> : ""}
    </div>
  );
};

export default ProgressBar;

2. less样式 代码

.outerContainer {
  display: flex;
  justify-content: space-between;
}

.progressContainer {
  width: 100%;
  height: 8px;
  background-color: #E9E9E9;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}


.progressBar {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 10px;
}

.progressTextCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: 12px;
}

.progressTextRight {
  margin-left: 10px;
  margin-top: -3px;
  font-size: 12px;
}

三 代码的使用和效果

1. 最常规样式：总长度100%，占比80%，文字标签在进度条中间（占比颜色可自定义）。

使用代码：

<MyProgress color={"#1677ff"} maxPercent={100} percent={80} showText={"center"}/>

2. 扩展样式：总长度150%，占比135%，文字标签在进度条右边（占比颜色可自定义）。

使用代码：

 <MyProgress color={"gold"} maxPercent={150} percent={135} showText={"right"}/>

3. 扩展样式：不显示文字标签

使用代码

   <MyProgress color={"red"} maxPercent={150} percent={135}/>