双颜色垂直堆叠进度条实现问题

嗨，我来帮你搞定这个双颜色进度追踪器的问题！

你要实现的是在单个进度条里区分已完成、尝试但未完成和未尝试三个部分的效果，用Bootstrap完全可以轻松实现，不需要额外写复杂的自定义样式，核心思路是把两个进度条叠加在同一个容器里，具体实现如下：

静态HTML版本 #

<div class="progress" style="height: 28px; border-radius: 12px;">
  <!-- 已完成的部分：用绿色背景 -->
  <div class="progress-bar bg-success d-flex align-items-center justify-content-center" 
       role="progressbar" style="width: 30%" 
       aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
    完成：3/10
  </div>
  <!-- 尝试过但未完成的部分：用黄色背景 -->
  <div class="progress-bar bg-warning d-flex align-items-center justify-content-center" 
       role="progressbar" style="width: 20%" 
       aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
    尝试：2/10
  </div>
  <!-- 未尝试的部分由外层progress容器的默认灰色背景填充 -->
</div>

动态JS版本（适配数据变化） #

如果你的完成数、尝试数是动态获取的，可以用JavaScript自动计算百分比并更新：

// 模拟你的数据
const totalTasks = 10;
const completedTasks = 3;
const attemptedTasks = 2;

// 计算各部分百分比
const completedPercent = (completedTasks / totalTasks) * 100;
const attemptedPercent = (attemptedTasks / totalTasks) * 100;

// 获取进度条元素
const completedBar = document.querySelector('.bg-success');
const attemptedBar = document.querySelector('.bg-warning');

// 更新宽度和文字
completedBar.style.width = `${completedPercent}%`;
completedBar.textContent = `完成：${completedTasks}/${totalTasks}`;

attemptedBar.style.width = `${attemptedPercent}%`;
attemptedBar.textContent = `尝试：${attemptedTasks}/${totalTasks}`;

• 外层的progress是进度条容器，我加了border-radius和调整了高度，让它更接近你目标图的样式；
• 两个progress-bar会自动横向排列，分别对应已完成和尝试部分，它们的宽度按「对应数量/总数」的比例计算；
• 用d-flex align-items-center justify-content-center让进度条内的文字居中显示，更美观；
• 颜色可以根据需求替换Bootstrap的内置背景类，比如bg-primary、bg-info，或者自定义CSS类修改颜色。

这样实现出来的效果就完全匹配你想要的目标进度条啦！

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