Battery 2.0

Question

How do I make it so when it reaches 20% left it turns red?
https://code.sololearn.com/WiH4TOcbXW16/?ref=app

Answer 1

here are the keyframes that you need

@keyframes loadforwds {
0%{
background-color: red;
}
20%{
background-color: red;
}

21%{
background-color: limegreen;
}
100% {
width: 240px;
}
}
@keyframes loadback {
0% {
width: 240px;
background-color: limegreen;
}
79%{
background-color: limegreen;
}
80%{
background-color: red;
}
100% {
width: 0px;
background-color: red;
}

}