Question

我正在制作已经动画的进度条，但我不确定如何使用渐进色渐变来制作动画。

我搜遍了所有但我无法找到我正在寻找的内容，但似乎css动画需要webkits？

实施例，

默认颜色为蓝色条

如果值>＆gt; 50％，黄色

如果值>＆gt; 75％，橙色

如果值>＆gt; 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

基础进度栏带有颜色进度动画？

1 个答案: