带有彩色进度动画的基础进度条？答案

【问题标题】：Foundation Progress Bar with color progress animation?带有彩色进度动画的基础进度条？
【发布时间】：2017-02-14 03:09:32
【问题描述】：

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

我到处搜索，但找不到我要找的确切内容，但似乎 css 动画需要 webkits？

例子，

默认颜色是蓝条

如果值 > 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>

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

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

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

【讨论】：