Javascript 基础进度条有彩色进度动画吗？

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

我到处搜索，但我找不到确切的内容，但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>

---

W3学校提供了一个关于如何使用JavaScript完成所需操作的教程，因此，我邀请您看看：