Css loading bar changes color - html

Question

Until now I have a simple loading bar:
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>
However, I would like it to change colors as it goes up. For example, when it is at 10%, it will be a dark green, at 50% it will start to turn yellow, and at 100% it will be red. I would like to solve this with css, but js is accepted. Thanks.

Answer 1

You can use Css annimation , using key frames , see below snippet :
set also animation fill mode to forwards to maintain final annimation state .
#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

Just set the background color depending on width. One way would be using an object with percentages and accompanying color:
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>