幅に応じて色を動的に変更するにはどうすればいいですか？

Question

OKだから、パーセンテージセットに応じてそのパーセンテージを満たすバーがあります。

しかし、これを変更するには、パーセンテージに応じて色を変えることができます。 100％に近づくにつれて徐々に緑色に変わり 0％赤〜25％例えば

HTML

<div class="progress"> 
</div> 

この上の任意のヘルプは素晴らしいだろう

.progress { 
    width:200px; 
    height:50px; 
    border:1px solid black; 
    position:relative; 
} 
.progress:after { 
    content:'\A'; 
    position:absolute; 
    background:black; 
    top:0; bottom:0; 
    left:0; 
    width:90%; 
    -webkit-animation: filler 2s ease-in-out; 
    -moz-animation: filler 2s ease-in-out; 
    animation: filler 2s ease-in-out; 
} 

@-webkit-keyframes filler { 
    0% { 
     width:0; 
    } 
} 
@-moz-keyframes filler { 
    0% { 
     width:0; 
    } 
} 
@keyframes filler { 
    0% { 
     width:0; 
    } 
} 

CSS 、 ありがとうございます。

Answer 1

あなたはここにlinear-gradientを使用してX軸に翻訳し、徐々に勾配の下に親要素を明らかにすること:after擬似要素をアニメーション化できます。

animation-fill-mode: forwardsは、アニメーションが終了すると:afterを右側に保持することです。

.progress { 
 
    width: 200px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
    background: linear-gradient(to right, red 25%, green 100%); 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.progress:after { 
 
    content: '\A'; 
 
position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    background: white; 
 
    left: 0; 
 
    width: 100%; 
 
    -webkit-animation: filler 2s ease-in-out; 
 
    -moz-animation: filler 2s ease-in-out; 
 
    animation: filler 2s ease-in-out; 
 
    animation-fill-mode: forwards; 
 
} 
 
@-webkit-keyframes filler { 
 
    100% { 
 
    transform: translateX(100%); 
 
    } 
 
} 
 
@-moz-keyframes filler { 
 
    100% { 
 
    transform: translateX(100%); 
 
    } 
 
} 
 
@keyframes filler { 
 
    100% { 
 
    transform: translateX(100%); 
 
    } 
 
}

<div class="progress"></div>

Answer 2

あなたはHTML5の進捗要素でそれを行うことができます。

<progress></progress> 

そして、あなたは、このようなスタイルを与えることができます：

progress[value] { 
    //your style 
} 

あなたはthisリンクで使用例を見つけることができます。