我在这里看到了一个完美的话题:How to increment value on progress-bar?
我想在我的Web项目中插入一个进度条。
所以我遵循this codepen。
function move() {
var progress = document.getElementById("progressbar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
progress.value = width
}
}
}
.progress.is-large {
height: 40px;
}
<progress id="progressbar" class="progress is-large is-info" max="100" value="1"></progress>
</br>
<button onclick="move()">Click Me</button>
我有一个问题,我不知道如何在动画之前和动画之后更改进度条的颜色。
我尝试了很多没有成功的事情...
请问有忍者想帮我吗?
问候
最佳答案
是可以更改的各种伪类,但这是特定于浏览器的。请参阅以下演示。请注意,至少要在Chrome中,必须设置进度元素本身的背景才能应用对条的更改。不能完全确定为什么。
function move() {
var progress = document.getElementById("progressbar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
progress.value = width
}
}
}
.progress {
height: 40px;
background: black;
}
.progress::-moz-progress-bar
{
background: red;
}
.progress::-webkit-progress-bar
{
background: transparent;
}
.progress::-webkit-progress-value
{
background: red;
}
<progress id="progressbar" class="progress is-large is-info" max="100" value="1"></progress>
</br>
<button onclick="move()">Click Me</button>