CSS进度条如何实现背景色随进度比例同步过渡而非直接跳终态

现有实现的核心bug是颜色过渡和进度值完全脱钩：
你把颜色的最终状态绑定在了.show类上——只要给元素加上这个类，不管宽度设成多少，background-color的过渡目标始终是100%进度对应的浅绿。也就是说，宽度的过渡目标是你设的50%，到点就停；但颜色的过渡目标是100%的绿，它根本不管宽度到了哪，自己会按1s的时长独立走完从红到绿的全程，自然没法停在和进度匹配的颜色上。

方案1：根据进度值直接计算对应色值（兼容性最好，全浏览器支持） #

把原来绑定在.show类上的颜色规则删掉，让颜色计算完全跟着进度值走，不依赖CSS自动做无联动的插值：

1. 先定好两个固定的颜色端点：0%进度的纯红、100%进度的浅绿
2. 写个简单的线性插值函数，输入0-100的进度值，算出中间对应的rgb颜色
3. 拿到AJAX返回的进度值时，同时设置bar的宽度和算好的背景色，保留原有的transition: all ease 1s就能保留平滑动画，不会出现生硬跳变

核心代码如下：

// 两个端点色值，可根据设计需求随时调整
const COLOR_0 = { r: 255, g: 0, b: 0 }; // 0%进度红色
const COLOR_100 = { r: 144, g: 238, b: 144 }; // 100%进度浅绿

function getColorByProgress(percent) {
  // 兜个底，把异常值限制在0-100范围内
  const validP = Math.max(0, Math.min(100, percent)) / 100;
  const r = Math.round(COLOR_0.r + (COLOR_100.r - COLOR_0.r) * validP);
  const g = Math.round(COLOR_0.g + (COLOR_100.g - COLOR_0.g) * validP);
  const b = Math.round(COLOR_0.b + (COLOR_100.b - COLOR_0.b) * validP);
  return `rgb(${r}, ${g}, ${b})`;
}

// 替换原来的测试逻辑
setTimeout(function(){
  const bar = document.getElementById("bar");
  const progressFromAjax = 50; // 实际用的时候替换成接口返回的动态值
  // 同步设置宽度和对应颜色，一步到位
  bar.style.width = `${progressFromAjax}%`;
  bar.style.backgroundColor = getColorByProgress(progressFromAjax);
}, 10);

同步修改原有CSS，删掉和进度脱钩的类规则：

#progress {
  border: 1px solid #888;
  background-color: #eee;
  height: 30px; /* 补上之前空着的高度值，不然进度条高度会不对 */
  width: 100%;
}
#bar {
  height: 30px;
  background-color: red;
  width: 0;
  transition: all ease 1s;
}

这个方案下，进度到50%的时候，颜色刚好停在红和绿的正中间，到100%就是当初设计的浅绿，完全不会跑偏。

方案2：用CSS变量做联动（代码更简洁） #

如果不需要兼容老旧的浏览器版本，可以借助CSS原生的color-mix能力实现联动，连JS算色值的步骤都省了：

1. 用CSS变量--progress存当前的进度百分比
2. 宽度直接根据这个变量计算，背景色用color-mix根据变量值自动在红和浅绿之间插值

对应CSS修改：

#progress {
  border: 1px solid #888;
  background-color: #eee;
  height: 30px;
  width: 100%;
}
#bar {
  --progress: 0; /* 默认0%进度 */
  height: 30px;
  width: calc(var(--progress) * 1%);
  /* 浏览器自动按进度比例混合红和浅绿的颜色 */
  background-color: color-mix(in srgb, red calc(var(--progress) * 1%), lightgreen);
  transition: all ease 1s;
}

JS逻辑更简单，只要给CSS变量赋值就行：

setTimeout(function(){
  const bar = document.getElementById("bar");
  const progressFromAjax = 50; // 替换为接口返回的动态值
  bar.style.setProperty('--progress', progressFromAjax);
}, 10);

• 别再把颜色的最终状态绑在固定类名上了，只要类存在，颜色就会脱离进度值自己跑完全程过渡
• 之前写的#progress的height是空值，记得补全，不然高度会挤没
• 如果需要在红到绿的过渡里加中间色（比如50%的时候是橙色），只要在插值逻辑里加上分段计算就行，不影响整体结构

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