battery_level.html

<div class="battery">
    <div id="battery_level" class="battery-level"></div>
</div>
<style>
    .battery:after {
        background-color: #fff;
        border: 2px solid #000;
        content: "";
        display: block;
        height: 16px;
        position: absolute;
        right: -6px;
        top: 6px;
        width: 6px;
    }

    .battery {
        background-color: #fff;
        border: 2px solid #000;
        height: 32px;
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 100px;
    }

    .battery .battery-level {
        background-color: #666;
        height: 100%;
    }

    .battery .battery-level.high {
        background-color: #66CD00;
    }

    .battery .battery-level.medium {
        background-color: #FCD116;
    }

    .battery .battery-level.low {
        background-color: #FF3333;
    }
</style>
<script>
    function setBatteryLevel(level) {
        document.getElementById("battery_level").style.width = level + "%";
        document.getElementById("battery_level").classList.remove('high');
        document.getElementById("battery_level").classList.remove('medium');
        document.getElementById("battery_level").classList.remove('low');
        if (level > 66) document.getElementById("battery_level").classList.add('high');
        else if (level >= 33) document.getElementById("battery_level").classList.add('medium');
        else document.getElementById("battery_level").classList.add('low');
    }
</script>