CSS 过渡百分比（用于进度条）

Question

我正在尝试制作一个带有动画的“进度条”，可以改变进度条的背景颜色。

该条应在 0% 处以红色开始，随着它在元素上前进，它会在 100% 处变为绿色。我已经 100% 工作了（不，颜色不是很好，但这是未来的问题）......

setTimeout(function(){
  var bar = document.getElementById("bar");
  bar.style.width = "100%";
  bar.classList.add("show");
},10);

#progress {
  border:1px solid #888;
  background-color:#eee;
  height:
  width:100%;
}
#bar {
  height:30px;
  background-color:red;
  width:0;
  transition: all ease 1s;
}
#bar.show {
  background-color:lightgreen;
}

<div id="progress"><div id="bar"></div></div>

问题是（例如）在 50% 时，我无法让条形图在红色和绿色之间的 50% 过渡状态“停止”。

有没有办法计算颜色为 50% 或让 CSS 在特定点停止过渡？

你可以看到如果我有一个 50% 的值会发生什么......它仍然一直到绿色但在 50% 宽度处停止，但我希望它在 50% 过渡颜色处停止（即从红色到红色和绿色的中间）...

setTimeout(function(){
  var bar = document.getElementById("bar");
  bar.style.width = "50%";
  bar.classList.add("show");
},10);

#progress {
  border:1px solid #888;
  background-color:#eee;
  height:
  width:100%;
}
#bar {
  height:30px;
  background-color:red;
  width:0;
  transition: all ease 1s;
}
#bar.show {
  background-color:lightgreen;
}

<div id="progress"><div id="bar"></div></div>

其他信息（应0stone0 的要求）在页面加载时将不知道百分比值，但将通过 AJAX 调用提供。

Answer 1

“停止”渐变过渡可能非常困难。

请考虑另一种方法，即手动计算所需的最终颜色。将此颜色值用作transition 的目标。这样就无需“停止”过渡，因为最终颜色已经与百分比成正比。

我使用this function 根据百分比计算绿色和红色之间的渐变。

为确保栏始终可点击，我们已将 onClick 移动到 .progress div，以便我们可以以 0 宽度呈现 .bar。

（更新答案，基于 cmets）

function load(progress, perc) {
  var bar = progress.getElementsByClassName("bar")[0];
  bar.style.width = perc.toString() + "%";
  bar.style.backgroundColor = getGradient(perc / 100);
}

function getGradient(ratio) {
  var color1 = '90ee90'; // lightgreen
  var color2 = 'FF0000'; // red
  var hex = function(x) {
    x = x.toString(16);
    return (x.length == 1) ? '0' + x : x;
  };

  var r = Math.ceil(parseInt(color1.substring(0,2), 16) * ratio + parseInt(color2.substring(0,2), 16) * (1-ratio));
  var g = Math.ceil(parseInt(color1.substring(2,4), 16) * ratio + parseInt(color2.substring(2,4), 16) * (1-ratio));
  var b = Math.ceil(parseInt(color1.substring(4,6), 16) * ratio + parseInt(color2.substring(4,6), 16) * (1-ratio));
  return '#' + hex(r) + hex(g) + hex(b);
}

.progress {
  border:1px solid #888;
  background-color:#eee;
  height:30px;
  width:100%;
}
.bar {
  height:30px;
  background-color:red;
  width:0;
  transition: all ease 1s;
}

Click to run...<br/>
<div class="progress" onclick='load(this, 25)'><div class="bar">25%</div></div>
<div class="progress" onclick='load(this, 50)'><div class="bar">50%</div></div>
<div class="progress" onclick='load(this, 75)'><div class="bar">75%</div></div>
<div class="progress" onclick='load(this, 100)'><div class="bar">100%</div></div>

（原始答案）

function load(bar, until) {
  var p = 0;
  setInterval(function() {
  
    // Clear on complete
    if (p > until) {
      clearInterval(this);
      return;
    }
    
    // Update Bar
    bar.innerHTML = p;
    bar.style.background = getGradient((p/1)/100);
    bar.style.width = p + "%";
    
    // Bump percentage 
    p++;
  }, 100);
}

function getGradient(ratio) {
    var color1 = '90ee90'; // lightgreen
    var color2 = 'FF0000'; // red
    var hex = function(x) {
        x = x.toString(16);
        return (x.length == 1) ? '0' + x : x;
    };

    var r = Math.ceil(parseInt(color1.substring(0,2), 16) * ratio + parseInt(color2.substring(0,2), 16) * (1-ratio));
    var g = Math.ceil(parseInt(color1.substring(2,4), 16) * ratio + parseInt(color2.substring(2,4), 16) * (1-ratio));
    var b = Math.ceil(parseInt(color1.substring(4,6), 16) * ratio + parseInt(color2.substring(4,6), 16) * (1-ratio));
    return '#' + hex(r) + hex(g) + hex(b);
}

.progress {
  border:1px solid #888;
  background-color:#eee;
  height: 50px;
  width:100%;
}
.bar {
  height:100%;
  width:100%;
}

<div class="progress"><div onClick='load(this, 100)' class="bar"></div></div>
<div class="progress"><div onClick='load(this, 50)'  class="bar"></div></div>

Answer 2

您可以通过获取计算的样式并将其设置为您的bar 元素（单击按钮）或当我们通过@987654324 使用轮询达到progress 元素的percentage 宽度来执行此类操作@ 像这样：-

var bar = document.getElementById("bar");
    setTimeout(function(){
      bar.style.width = "100%";
      bar.classList.add("show");
    },10);


function stopProgressAt(percentage){
let interval = setInterval(()=>{
 const progress = document.getElementById("progress");
 const width = getComputedStyle(bar).getPropertyValue('width');
if((parseInt(width) * 100)/(Math.floor(progress.offsetWidth)) >= percentage ){
pauseTransition();
setTimeout(()=>clearInterval(interval),0);
}
},0)
}


function pauseTransition(){
     const bgColor = getComputedStyle(bar).getPropertyValue('background-color');
    const width = getComputedStyle(bar).getPropertyValue('width');
     bar.style.width=width;
     bar.style.backgroundColor=bgColor;
    ;}
    
 stopProgressAt(66);   

#progress {
      border:1px solid #888;
      background-color:#eee;
      height:
      width:100%;
    }
    #bar {
      height:30px;
      background-color:red;
      width:0;
      transition: all ease 1s;
    }
    #bar.show {
      background-color:lightgreen;
    }

<div id="progress"><div id="bar"></div></div>
    <button onclick="pauseTransition()">Pause</button>

Answer 3

使用不透明的叠加层，如下所示：

setTimeout(function() {
  const hue = 120;
  const size = 0.7;
  const H = hue * size;
  const L = (size < .5 ? 1 - size : size) * 50;
  const hsl = `hsl(${H}, 100%, ${L}%)`;
  const progress = document.getElementById('progress');
  progress.style.setProperty('--size', size);
  progress.style.setProperty('--hsl', hsl);
}, 500);

#progress {
  --size: 0;
  --hsl: hsl(0, 100%, 50%);
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 20px;
  border: 1px solid #888;
  background-color: var(--hsl);
  transition: background-color 1s;
}
#bar {
  width: 100%;
  height: 100%;
  background: white;
  transition: margin-left 1s;
  margin-left: calc(var(--size) * 100%);
}

<div id="progress"><div id="bar"></div></div>