我在这里看到了一个完美的话题: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>

10-07 18:39
查看更多