我有一些网页进度条的代码，示例代码在这里：
<!DOCTYPE html>
<html>
<head>
<style>
progress {
background-color: #fff;
height:40px;
width:200px;
border: 1px solid black;
}
progress::-webkit-progress-bar {background-color: #fff;}
progress::-webkit-progress-value {background-color: #cb8;}
progress::-ms-fill {background-color: #cb8;}
progress::-moz-progress-bar {background: #cb8;}
</style>
</head>
<body>
<progress id="prog" value = 0 max = 50></progress>
<script>
const $ = s => document.getElementById(s)
window.setInterval(function(){
$("prog").value += 2;
if($("prog").value >= $("prog").max){$("prog").value -= $("prog").max}
}, 50);
</script>
</body>
除了挑剔的伪元素之外，它在Chrome，Opera和Firefox上效果很好。
但是，Microsoft Edge 浏览器坚持在每次进度条更新时对过渡进行动画处理，这会产生令人愤怒的结果，即当值快速变化时引入大量滞后和奇怪的行为。
我已经尝试了我能想到的一切来禁用边缘的这种行为，但到目前为止，禁用此动画/过渡没有运气。有什么建议吗？
如果可能的话，我真的很想使用 <progress> 标签，因为能够直接操作value比更新嵌套div 的宽度要方便得多。
<!DOCTYPE html>
<html>
<head>
<style>
progress {
background-color: #fff;
height:40px;
width:200px;
border: 1px solid black;
}
progress::-webkit-progress-bar {background-color: #fff;}
progress::-webkit-progress-value {background-color: #cb8;}
progress::-ms-fill {background-color: #cb8;}
progress::-moz-progress-bar {background: #cb8;}
</style>
</head>
<body>
<progress id="prog" value = 0 max = 50></progress>
<script>
const $ = function(s){ return document.getElementById(s) };
window.setInterval(function(){
$("prog").value += 2;
if($("prog").value >= $("prog").max){$("prog").value -= $("prog").max}
}, 50);
</script>
</body>
试试这个代码。它在镀铬和Microsoft边缘工作
我遇到了同样的问题，无法解决。根据这篇博文，目前根本没有办法更改IE和Edge进度条动画。