如何让react-circular-progressbar进度条从底部开始向两侧延伸？

一、实现内部天蓝色背景 #

直接修改styles.background.fill属性为天蓝色值即可，比如#00ade9。

二、实现进度条从底部向两侧均等延伸 #

你之前的rotate代码无效是因为加在了trail样式上，正确的做法是针对path（已完成进度的路径）设置旋转和对称偏移：

1. 用transform: rotate(270deg)和transformOrigin: center center把进度条的起始点定位到底部
2. 通过strokeDasharray和strokeDashoffset实现对称延伸，让进度从底部向左右两侧各展开一半的百分比

修改后的完整代码 #

import React from 'react';
import { CircularProgressbar } from 'react-circular-progressbar';
import "react-circular-progressbar/dist/styles.css";

function Circular_progress_bar() {
  const percentage = 10;

  return (
    <div style={{ width: 200, height: 200 }}> {/* 给容器设置固定尺寸，确保进度条正常显示 */}
      <CircularProgressbar
        value={percentage}
        text={`${percentage}%`}
        background
        backgroundPadding={0}
        styles={{
          background: {
            fill: "#00ade9" // 内部天蓝色背景
          },
          path: {
            stroke: "#102558", // 进度条颜色，可按需调整
            transform: "rotate(270deg)",
            transformOrigin: "center center",
            // 实现对称延伸的核心设置
            strokeDasharray: `${percentage}% ${100 - percentage}%`,
            strokeDashoffset: `-${percentage / 2}%`,
            strokeLinecap: "round" // 可选，让进度条两端更圆润
          },
          trail: {
            stroke: "transparent" // 隐藏默认的背景轨迹
          },
          text: {
            fill: "white",
            fontSize: "3rem",
            fontWeight: "bold"
          }
        }}
      />
    </div>
  );
}

export default Circular_progress_bar;

关键代码说明 #

• strokeDasharray: ${percentage}% ${100 - percentage}%``：定义进度段占总圆周的比例，空白段占剩余比例
• strokeDashoffset: -${percentage / 2}%``：让进度段向左偏移一半的长度，从而实现从底部向两侧对称展开的效果
• 容器设置固定尺寸：确保进度条有足够的显示空间，避免样式错乱

内容的提问来源于stack exchange，提问作者Fuaad