咨询基于百分比分段的多色进度条实现方案（CSS/JS）

当然可以实现这种分段变色的进度条！我给你两种实用的方案，一种是纯CSS结合线性渐变的轻量实现，另一种是JS辅助计算的灵活方案，都完美支持你要求的通过style="width:xx%"来控制总进度。

方案一：纯CSS + 线性渐变（无需JS，适合简单分段） #

这种方案利用CSS线性渐变直接定义颜色分段，只需要给进度条核心元素设置总宽度百分比，就能自动显示对应区间的颜色，非常适合固定分段规则的场景。

代码示例 #

<!-- 外层容器 -->
<div class="progress-container">
  <!-- 进度条主体，通过style控制总进度 -->
  <div class="progress-multi" style="width: 50%"></div>
</div>

.progress-container {
  height: 32px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 15px;
  overflow: hidden; /* 隐藏超出容器的进度部分 */
  background-color: #f5f5f5; /* 未填充区域的底色 */
}

.progress-multi {
  height: 100%;
  /* 定义分段颜色：0-30%浅蓝，30%-100%绿色 */
  background: linear-gradient(
    to right,
    #87ceeb 0%,
    #87ceeb 30%,
    #90ee90 30%,
    #90ee90 100%
  );
  border-radius: 15px 0 0 15px; /* 左侧圆角和容器匹配 */
  transition: width 0.3s ease; /* 添加过渡动画让进度变化更流畅 */
}

效果说明 #

• 当你设置style="width:50%"时，进度条会显示到50%的位置，自动截断在绿色区间（30%-50%）；
• 如果设置width:25%，则只会显示浅蓝部分；
• 若需要更多分段，只需在linear-gradient中添加更多颜色节点即可，比如新增红色段：#ffcccc 70%, #ffcccc 100%。

方案二：JS辅助的动态分段实现（适合复杂/可变分段） #

如果你的分段规则更复杂（比如需要动态调整分段区间、支持3段及以上），JS方案会更灵活。它会根据总进度百分比，自动计算每个分段的显示宽度。

代码示例 #

<div class="progress-container">
  <div class="progress-multi" style="width: 75%"></div>
</div>

.progress-container {
  height: 32px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 15px;
  overflow: hidden;
  display: flex; /* 让分段元素横向排列 */
  background-color: #f5f5f5;
}

.progress-multi {
  height: 100%;
  display: flex;
  transition: width 0.3s ease;
}

.progress-segment {
  height: 100%;
  flex-shrink: 0; /* 防止分段被压缩变形 */
  border-radius: inherit;
}

// 自定义分段规则：数组元素为{颜色, 结束百分比}
const segmentRules = [
  { color: '#87ceeb', endPercent: 30 },
  { color: '#90ee90', endPercent: 70 },
  { color: '#ffcccc', endPercent: 100 }
];

// 获取进度条元素
const progressBar = document.querySelector('.progress-multi');

// 生成分段的核心函数
function renderProgressSegments() {
  // 清空现有分段
  progressBar.innerHTML = '';
  // 解析当前总进度（转为数字，默认0）
  const totalProgress = parseFloat(progressBar.style.width) || 0;
  
  let prevEndPercent = 0;
  
  segmentRules.forEach(segment => {
    // 计算当前分段的实际结束点：取总进度和分段结束百分比的较小值
    const currentEnd = Math.min(totalProgress, segment.endPercent);
    // 计算当前分段的宽度
    const segmentWidth = Math.max(0, currentEnd - prevEndPercent);
    
    if (segmentWidth > 0) {
      const segmentEl = document.createElement('div');
      segmentEl.className = 'progress-segment';
      segmentEl.style.backgroundColor = segment.color;
      segmentEl.style.width = `${segmentWidth}%`;
      progressBar.appendChild(segmentEl);
    }
    
    prevEndPercent = segment.endPercent;
    // 如果总进度已小于当前分段的结束百分比，提前终止循环
    if (totalProgress <= segment.endPercent) return;
  });
}

// 初始化渲染
renderProgressSegments();

// 动态修改进度后重新渲染的示例：
// progressBar.style.width = '40%';
// renderProgressSegments();

效果说明 #

比如设置总进度为75%时，会自动显示：

• 完整的浅蓝段（0-30%）
• 完整的绿色段（30-70%）
• 5%的红色段（70-75%）

额外小技巧 #

你可以给进度条添加文字提示，比如在容器内加一个绝对定位的span，显示当前进度百分比，提升用户体验：

.progress-container {
  position: relative;
}

.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

内容的提问来源于stack exchange，提问作者Mr. Developer