Aşağıda bununla ilgili bir örnek vardır.

HTML:

<div class="center">
    <div class="batteryShape">
        <div class="level">
            <div class="percantage"></div>
        </div>
    </div>
    <b>50%</b>
</div>

CSS:

        .batteryShape {
            position: relative;
            width: 140px;
            height: 65px;
            margin: 0;
            border: 3px solid #333;
            border-radius: 10px;
        }
        .batteryShape::before {
            border-radius: 0 2px 2px 0;
            content: '';
            position:absolute;
            top:50%;
            right:-10px;
            transform:translateY(-50%);
            width:7px;
            height:16px;
            background: #333;
        }
        .batteryShape::after {
            content:'';
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:50%;
            background:rgba(255,255,255,.1);
        }
        .level {
            position: absolute;
            top:4px;
            left:4px;
            right:4px;
            bottom: 4px;
            border-radius:4px;
            overflow: hidden;
        }
        .center {
            text-align:center;
            left:50%;
            top:50%;
            position: absolute;
            transform: translate(-50%,-50%);
        }
        b {
            margin:0;
            padding:0;
            font-family: sans-serif;
            color: #0055ff;
            font-size: 2em;
            font-weight: 700;
        }
        .percantage {
            border-radius: 4px;
            position:absolute;
            top:0;
            left:0;
            height:100%;
            width:50%;
            background:linear-gradient(90deg,#001c55,#0055ff);
        }

JAVASCRIPT:

let percantage = document.querySelector('.percantage');
        let percent = document.querySelector('b');
        navigator.getBattery().then(function(battery){
            percantage.style.width = battery.level * 100 + '%';
            percent.innerHTML = battery.level * 100 + '%';
        })

Demo:

Bunun demosuna buradan ulaşabilirsiniz. Kesinlikle çalışıyor!