如何在React.js中实现末端带圆形标注的水平进度条？

实现思路 #

• 给已填充的进度条容器设置position: relative作为圆形元素的定位父级，无需修改原有进度条的核心渲染逻辑
• 新增圆形DOM节点，通过绝对定位固定在已填充区域的最右端，配合垂直居中属性保证位置适配不同进度值
• 外层进度条容器预留右侧边距，避免进度为100%时圆形元素溢出容器边界

完整实现代码 #

组件逻辑代码 #

import React from 'react';
import './App.css';

// 进度条组件可接收参数：percent进度值、circleText圆形内显示文本
const ProgressBar = ({ percent = 0, circleText = '' }) => {
  // 校验进度值范围，避免超出0-100
  const validPercent = Math.min(100, Math.max(0, percent));

  return (
    <div className="progress-wrap">
      {/* 进度条背景轨道 */}
      <div className="progress-track">
        {/* 已填充进度区域 */}
        <div 
          className="progress-fill"
          style={{ width: `${validPercent}%` }}
        >
          {/* 原有进度百分比文本，不需要可直接删除 */}
          <span className="progress-percent">{validPercent}%</span>
          {/* 新增末端圆形元素 */}
          <div className="progress-circle">
            {/* 优先显示传入的自定义文本，无传入则默认显示进度值 */}
            {circleText || validPercent}
          </div>
        </div>
      </div>
    </div>
  );
};

// 调用示例
export default function App() {
  return (
    <div className="App">
      <ProgressBar percent={75} circleText="优" />
    </div>
  );
}

样式代码（App.css） #

/* 进度条外层容器 */
.progress-wrap {
  width: 400px;
  /* 右侧预留圆形一半宽度的边距，避免100%进度时圆形溢出 */
  padding-right: 12px;
  box-sizing: border-box;
}
/* 进度条背景轨道 */
.progress-track {
  width: 100%;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
/* 已填充进度区域 */
.progress-fill {
  height: 100%;
  background-color: #10b981;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* 可选：进度变化动画 */
  transition: width 0.3s ease;
}
/* 原有进度百分比文本样式，不需要可删除 */
.progress-percent {
  font-size: 12px;
  color: #fff;
  margin-right: 16px;
}
/* 末端圆形元素样式 */
.progress-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #10b981;
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

自定义调整说明 #

• 可直接修改样式中的尺寸、颜色值适配项目设计规范，比如圆形大小、进度条高度、主题色等
• 若不需要原有进度条上的百分比显示，直接删除progress-percent对应节点和样式即可
• 圆形内文本可任意自定义，支持传入数字、汉字、图标等内容

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