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

最新推荐文章于 2025-06-19 15:36:42 发布

原创

最新推荐文章于 2025-06-19 15:36:42 发布 · 633 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

一说明

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":
        setT