javascript - 带有彩色进度动画的基础进度条？

Question

我正在制作一个已经具有动画效果的进度条，但我不确定如何使用渐进式颜色渐变为其制作动画效果。

我到处搜索，但找不到我要找的东西，但似乎 css 动画需要 webkit？

例子，

默认颜色为蓝色条

如果值 > 50%，黄色

如果值为 > 75%，橙色

如果值> 90%，红色

动画:

  componentDidMount() {
    $(".progress div").each(function () {
      var display = $(this),
          nextValue = $(this).attr("data-values")

          $(display).css("color", "black").animate({
              "width": nextValue + "%"
          }, 2000);
      }
    );
  },

渲染:

<div className="progress" role="progressbar" id="progressBarStyle">
    <div className="progress-meter" data-values={this.calculatePercent(160000)}></div>
</div>

Answer 1

W3 Schools 有一个关于如何使用 JavaScript 做你需要做的事情的教程，所以我邀请你看一看:

http://www.w3schools.com/howto/howto_js_progressbar.asp