Foundation Progress Bar with color progress animation?

Question

I'm working on a progress bar that already animates but I'm unsure how to animate it with a progressive color gradient.

I searched all over but I couldn't find exactly what I'm looking for, but it seems like css animation would require webkits?

Example,

Default color is blue bar

if value is > 50%, yellow

if value is > 75%, orange

if value is > 90%, red

Animate:

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

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

Render:

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

SergioAMG SergioAMG · Accepted Answer · 2017-02-09T22:56:58

W3 Schools has a tutorial on how to do what you need using JavaScript so , I invite you to take a look:

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

Foundation Progress Bar with color progress animation?

1 Answers