カラープログレスアニメーションの進捗状況バー？

Question

私は既にアニメーション化しているプログレスバーに取り組んでいますが、プログレッシブカラーグラデーションでアニメーションを作成する方法は不明です。

私は完全に検索しましたが、私が探しているものはまったく見つかりませんでしたが、CSSアニメーションにはウェブキットが必要ですか？値は> 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