帶有顏色進度動畫的Foundation Progress Bar？

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學校提供了有關如何使用JavaScript進行所需操作的教程，因此，我邀請您來看看：

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