Javascript CSS转换百分比（用于进度条）

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

该条应以0%处的红色开始，当它穿过元素时，在100%处变为绿色。我已经让这个100%的工作（不，颜色不是很好，但这是一个未来的问题）

setTimeout（函数（）{
var bar=document.getElementById（“bar”）；
bar.style.width=“100%”；
添加（“显示”）；
},10);
#进度{
边框：1px实心#888；
背景色：#eee；
高度：
宽度：100%；
}
#酒吧{
高度：30px；
背景色：红色；
宽度：0；
过渡：所有1秒；
}
#酒吧表演{
背景颜色：浅绿色；
}
您可以通过获取计算出的样式并将其设置到您的
条
元素（单击按钮），或者当我们通过
设置间隔
使用轮询达到
进度
元素的
百分比
宽度时，执行类似操作：-


var bar=document.getElementById（“bar”）；
setTimeout（函数（）{
bar.style.width=“100%”；
添加（“显示”）；
},10);
函数stopProgressAt（百分比）{
let interval=setInterval（（）=>{
const progress=document.getElementById（“进度”）；
常量宽度=getComputedStyle（条形）。getPropertyValue（'width'）；
如果（（parseInt（宽度）*100）/（数学层（进度偏移宽度））>=百分比）{
暂停转换（）；
setTimeout（（）=>clearInterval（interval），0）；
}
},0)
}
函数pauseTransition（）{
const bgColor=getComputedStyle（bar）.getPropertyValue（'background-color'）；
常量宽度=getComputedStyle（条形）。getPropertyValue（'width'）；
bar.style.width=宽度；
bar.style.backgroundColor=bgColor；
;}
stopProgressAt（66）
#进度{
边框：1px实心#888；
背景色：#eee；
高度：
宽度：100%；
}
#酒吧{
高度：30px；
背景色：红色；
宽度：0；
过渡：所有1秒；
}
#酒吧表演{
背景颜色：浅绿色；
}

暂停
使用不透明覆盖，如下所示：


setTimeout（函数（）{
常数色调=120；
常数大小=0.7；
常数H=色调*大小；
常数L=（大小<.5？1-大小：大小）*50；
常量hsl=`hsl（${H}，100%，${L}%）`；
const progress=document.getElementById（'progress'）；
progress.style.setProperty（'--size'，size）；
progress.style.setProperty（'--hsl'，hsl）；
}, 500);
#进度{
--大小：0；
--hsl:hsl（0,100%，50%）；
位置：相对位置；
溢出：隐藏；
宽度：200px；
高度：20px；
边框：1px实心#888；
背景色：var（--hsl）；
过渡：背景色1s；
}
#酒吧{
宽度：100%；
身高：100%；
背景：白色；
过渡：边距左1秒；
左边距：计算值（var（-size）*100%）；
}
“停止”渐变过渡可能非常困难

请考虑另一种方法，手动计算最终的最终颜色。使用此颜色值作为过渡的目标。这样就不需要“停止”过渡，因为最终颜色已经与百分比成比例
我曾经根据百分比计算绿色和红色之间的梯度

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

（更新答案，基于评论）


功能加载（进度，perc）{
var bar=progress.getElementsByClassName（“bar”）[0]；
bar.style.width=perc.toString（）+“%”；
bar.style.backgroundColor=getGradient（perc/100）；
}
函数梯度（比率）{
var color1='90ee90'；//浅绿色
var color2='FF0000'；//红色
var hex=函数（x）{
x=x.t串（16）；
返回值（x.length==1）？“0”+x:x；
};
var r=Math.ceil（parseInt（color1.子字符串（0,2），16）*比率+parseInt（color2.子字符串（0,2），16）*（1-比率））；
var g=Math.ceil（parseInt（color1.子字符串（2,4），16）*比率+parseInt（color2.子字符串（2,4），16）*（1-比率））；
VarB=Math.ceil（parseInt（color1.子字符串（4,6），16）*比率+parseInt（color2.子字符串（4,6），16）*（1-比率））；
返回“#”+hex（r）+hex（g）+hex（b）；
}
。进度{
边框：1px实心#888；
背景色：#eee；
高度：30px；
宽度：100%；
}
.酒吧{
高度：30px；
背景色：红色；
宽度：0；
过渡：所有1秒；
}
点击运行…

25%
50%
75%
100%
感谢您的回答。你能告诉我如何在特定的百分比值下工作吗。。。比如说66%。这不是人们会手动停止的东西，而是基于预定百分比显示的东西value@freefaller通过
setInterval
和
percentage
变量尝试轮询机制，更新了答案。感谢您的努力，但这看起来非常粗糙。。。它还导致（在我的Firefox上）条到达中间（尽管我建议以66%为例），然后收回一些pixels@freefaller你说得对，它很粗糙。也许
动画
关键帧和
暂停状态
对您来说很方便。但在firefox中它对我来说很好。但是，如果在“视口调整大小”上选择“是”，则不会看到所需的行为。将需要额外的
调整大小
事件处理程序，使条形图与进度宽度一致。您可以将
百分比
变量设置为66，以获得所需的内容，以防错过它。我喜欢这个主意。。。但与其直接设置颜色，不如将其计算一次，并将其设置为过渡的最终颜色。我会有一个剧本啊哈，也许你可以把它加到作品里？打开了更多的解决方案。@freefaller在您的ajax回调中调用
getGradient（percentage/100）
不会解决您的问题吗？我的意思是你只需要知道科罗拉多