如何为进度条激活区与非激活区设置不同文本颜色？

核心思路是通过双重文本重叠+同步裁剪实现需求：底层文本固定为蓝色，上层文本为白色，用一个与进度条同步宽度的容器裁剪上层白色文本，进度条移动时同步调整裁剪容器的宽度，即可实现文本颜色随进度动态变化的效果。

修改后的完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Progress Bar Text Color Sync</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
  body{
    width:600px;
    padding: 20px;
}
.progress-bar-wrap {
    position: relative;
    margin-bottom: 10px;
}

.progress-bar {
    background: #fff;
    width: 100%;
    height: 40px;
    border: 1px solid #377db7;
    border-radius: 25px;
    text-align: left;
    overflow: hidden;
}

.load-progress {
    background: #4c9fe3;
    width: 10%;
    height: 100%;
    display: inline-block;
    border-radius: 20px;
    transition: width 0.3s ease;
}

/* 文本容器：两个文本重叠定位 */
.amount-container {
    position: absolute;
    top: 4px;
    left: 10px;
    font-family: Comfortaa;
    font-size: 23px;
    font-weight: 400;
    line-height: 30px;
    width: 100%;
}

/* 底层蓝色文本 */
.amount-blue {
    color: #377db7;
}

/* 上层白色文本容器：裁剪显示范围 */
.amount-white-wrap {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 10%; /* 初始与进度条宽度一致 */
    transition: width 0.3s ease;
}

.amount-white {
    color: #fff;
}

span#load-target {
    position: absolute;
    top: 4px;
    color: #377db7;
    margin-top: 0;
    right: 13px;
    font-family: Comfortaa;
    font-size: 23px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0em;
    text-align: left;
    display: inline-block;
}
</style>
<body>
  <div class="progress-bar-wrap" id="progress-barwrap">
      <div class="progress-bar">
          <span id="load-percent" class="load-progress"></span>
      </div>
      <!-- 修改后的文本结构：双重重叠文本 -->
      <div class="amount-container">
          <span class="amount-blue">€1,000,710 paid</span>
          <div class="amount-white-wrap" id="white-text-wrap">
              <span class="amount-white">€1,000,710 paid</span>
          </div>
      </div>
      <span class="target" id="load-target">target €1,000,000</span>
  </div>

  <script>
    // 动态进度条动画函数
    function animateProgress() {
        const progressBar = document.getElementById('load-percent');
        const whiteTextWrap = document.getElementById('white-text-wrap');
        let currentWidth = 10;
        const maxWidth = 100;
        
        const interval = setInterval(() => {
            currentWidth += 1;
            if (currentWidth > maxWidth) {
                clearInterval(interval);
                currentWidth = maxWidth;
            }
            // 同步更新进度条和白色文本容器的宽度
            progressBar.style.width = `${currentWidth}%`;
            whiteTextWrap.style.width = `${currentWidth}%`;
        }, 50);
    }

    // 页面加载后启动动画
    window.onload = animateProgress;
  </script>
</body>
</html>

关键修改说明 #

• HTML结构调整：将原单一的load-amount拆分为两个重叠的文本元素，蓝色文本作为底层，白色文本放在带overflow: hidden的容器中，控制显示范围。
• CSS定位优化：用绝对定位让两个文本完全重叠，给裁剪容器和进度条添加transition属性，让宽度变化更平滑自然。
• JS同步控制：动画函数中同时修改进度条和白色文本容器的宽度，确保两者同步，实现文本颜色随进度动态切换的效果。

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