CSSの読み込みバーが今まで色

Question

を変更し、私は、単純なロードバーがあります。

setInterval(tick, 10); 
 
var width = 0; 
 
function tick() { 
 
    var el = document.getElementById('bar_full'); 
 
    width += 1; 
 
    width = width > 97 ? 97 : width; 
 
    document.getElementById('bar_full').style.width = width + '%'; 
 
}

#bar_shell { 
 
    width: 100%; 
 
    height: 30px; 
 
    background: lightGray; 
 
    border-radius: 20px; 
 
} 
 

 
#bar_full { 
 
    width: 0%; 
 
    margin-top: 5px; 
 
    margin-left: 5px; 
 
    height: 20px; 
 
    background: green; 
 
    position: absolute; 
 
    border-radius: 10px; 
 
}

<div id="bar_shell"> 
 
    <div id="bar_full"></div> 
 
</div>

をしかし、私はそれが上がると、それは色を変更したいと思います。たとえば、10％のときは濃い緑、50％のときは黄色、100％のときは赤です。私はCSSでこれを解決したいが、jsは受け入れられる。ありがとう。

Answer 1

あなたは以下を参照してください、キーフレームを使用して、CSSのannimationを使用することができますがスニペット：

セットもアニメーションにモードを埋めますforwardsを使用して、最後のアニメーション状態を維持します。

#bar_shell { 
 
    width: 100%; 
 
    height: 30px; 
 
    background: lightGray; 
 
    border-radius: 20px; 
 
} 
 

 
#bar_full { 
 
    width: 0%; 
 
    margin-top: 5px; 
 
    margin-left: 5px; 
 
    height: 20px; 
 
    background: green; 
 
    position: absolute; 
 
    border-radius: 10px; 
 
    -webkit-animation: changecolor 5s forwards; /* Safari 4.0 - 8.0 */ 
 
    animation: changecolor 5s forwards; 
 
    animation-timing-function: ease-in-out; 
 
    -webkit-animation-timing-function: ease-in-out; 
 
} 
 

 

 
@-webkit-keyframes changecolor { 
 
    0% {width: 0; background:blue} 
 
    25% {width: 25%;background:yellow} 
 
    50% {width: 50%;background:orange} 
 
    75% {width: 75%;background:red} 
 
    100% {width: 100%;color:green} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes changecolor { 
 
    0% {width: 0; background:blue} 
 
    25% {width: 25%;background:yellow} 
 
    50% {width: 50%;background:orange} 
 
    75% {width: 75%;background:red} 
 
    100% {width: 97%;background:green} 
 
}

<div id="bar_shell"> 
 
    <div id="bar_full"></div> 
 
</div>

Answer 2

背景色は幅に合わせて設定してください。割合でオブジェクトを使用して、色を伴うことになる一つの方法：

setInterval(tick, 10); 
 
var width = 0; 
 
var colors = { 
 
    '0': '#cfeff0', 
 
    '10': '#bbc6ce', 
 
    '50': '#660066', 
 
    '80': '#f6546a' 
 
}; 
 
function tick() { 
 
    var el = document.getElementById('bar_full'); 
 
    width += 1; 
 
    width = width > 97 ? 97 : width; 
 
    var el = document.getElementById('bar_full'); 
 
    el.style.width = width + '%'; 
 
    var color = colors[width]; 
 
    if (color) el.style.backgroundColor = color; 
 
}

#bar_shell { 
 
    width: 100%; 
 
    height: 30px; 
 
    background: lightGray; 
 
    border-radius: 20px; 
 
} 
 

 
#bar_full { 
 
    width: 0%; 
 
    margin-top: 5px; 
 
    margin-left: 5px; 
 
    height: 20px; 
 
    background: green; 
 
    position: absolute; 
 
    border-radius: 10px; 
 
}

<div id="bar_shell"> 
 
    <div id="bar_full"></div> 
 
</div>