如何用CSS比较自定义属性--percent值并切换进度条样式？

我正在用CSS构建一款进度条，样式类似 |=========----------------|，通过两种颜色的渐变展示完成/剩余百分比。已用CSS自定义属性 --percent 控制进度，通过JavaScript修改该属性就能更新渐变填充效果。

进度条两端的竖条颜色分别对应起始色和结束色，但当 --percent 达到100%时，右侧竖条没有自动切换为填充色（起始色）。想知道能不能纯靠CSS对比 --percent 和100%的值，给右侧竖条换色，尽量不用JavaScript解决。

当前代码示例 #

JavaScript #

// 动画更新进度条
var percent = 0;
setInterval(function() {
    $('.line').css('--percent', `${percent}%`);
  percent += 0.1;
  if (percent > 100) { percent = 0; }
}, 10);

CSS #

.line
{
  /* 用以下自定义属性定制进度条： */
  --line-thickness: 7px;
  --bar-height: calc(var(--line-thickness) * 4);
  /* --bar-height: 40px; */
  
  --start-color: purple;
  --end-color: green;
  --percent: 0%;
  
  
  display: flex;
  justify-content: space-between;
  width: 50%;
  height: var(--line-thickness);
  background-color: var(--start-color);
  margin-top: var(--bar-height);
  margin-bottom: var(--bar-height);
  margin-left: var(--line-thickness);
  margin-right: var(--line-thickness);
  
  background: linear-gradient(90deg, var(--start-color) 0%, var(--start-color) var(--percent), var(--end-color) var(--percent));
  
  }

.line .left, .line .right
{
  width: var(--line-thickness);
  height: var(--bar-height);
  margin-top: calc((var(--bar-height) - var(--line-thickness)) / -2);
  /* border: 1px solid white; */
}

.line .left
{
  background-color: var(--start-color);
  margin-left: calc(var(--line-thickness) * -1);
}

.line .right
{
  background-color: var(--end-color);
  margin-right: calc(var(--line-thickness) * -1);
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="line">
  <div class="left"></div>
  <div class="right"></div>
</div>

纯CSS解决方案 #

方案一：兼容性优先的数值判断法 #

通过将百分比转换为纯数值，生成一个0/1的开关变量，控制颜色切换：

.line
{
  /* 保留原有属性，新增以下变量计算 */
  --percent-num: calc(var(--percent) / 1%); /* 将百分比转为纯数值，如50%→50 */
  --is-full: calc((var(--percent-num) - 100) * -1); /* 进度≥100时为1，否则为负数 */
  --is-full: clamp(0, var(--is-full), 1); /* 限定值在0-1之间 */
}

.line .right
{
  /* 替换原有background-color */
  background-color: calc(var(--is-full) * var(--start-color) + (1 - var(--is-full)) * var(--end-color));
}

方案二：简洁的min函数判断法 #

利用min()函数直接判断进度是否达到100%，写法更简洁（注意：部分旧浏览器可能不支持）：

.line .right
{
  background-color: calc(
    (min(var(--percent) / 1%, 100) - 99.99) * 1000 * var(--start-color) +
    (100 - min(var(--percent) / 1%, 100)) * 1000 * var(--end-color)
  );
}

两种方案都无需修改JavaScript代码，纯靠CSS实现当--percent达到100%时，右侧竖条从--end-color切换为--start-color。

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