• HTML
• CSS

HTML

<div class="battery">
    <div class="battery-body">
        <div class="battery-charge"></div>
    </div>
</div>

CSS

*
{
    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:#dfda1e;
    }
    100%
    {
        width:100%;
        background-color:#79da1e;
    }
}

/*
    All the credits: https://www.youtube.com/watch?v=jVXwbwy3A9E
*/