* {
    padding:0;
    margin:0;
    box-sizing:border-box;
}
body {
    display:flex;
    align-items:center;
    justify-content:center;
    height: 100vh;
    background-color:#121212;
}
.battery-body{
    width:260px;
    height:130px;
    border: 4px solid #fff;
    border-radius: 20px;
    overflow: hidden;
}
.battery {
    position: relative;
}
.battery::after {
    content:'';
    position: absolute;
    right: -19px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 35px;
    border: 4px solid #fff;
    border-left: transparent;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.battery-charge {
    height: 100%;
    width: 0%;
    background-color: #da1e2a;
    border-radius: 12px;
    animation: battery-charge 4s linear infinite alternate;
}
@keyframes battery-charge {
    0% {
        width: 0;
        background-color: #da1e2a;
    }
    25% {
        width: 25%;
        background-color: #da5c1e;
    }
    50% {
        width: 50%;
        background-color: #dacc1e;
    }
    75% {
        width: 75%;
        background-color: #bfda1e;
    }
    100% {
        width: 100%;
        background-color: #79da1e;
    }
}