<div class="main">
<h1 id="level" class="animated fadeIn">Battery level: 00%</h1>
<div class="progress">
<div class="progress-bar" style="width: 0%">
</div>
</div>
<a href="http://caniuse.com/#feat=battery-status" class="btn btn-raised btn-primary" target="_blank">Browser compatibility</a>
</div>
.main{
width: 70%;
margin: 5% auto;
}
navigator.getBattery().then(function(battery) {
$('.progress-bar').css('width', battery.level * 100 + '%');
$('#level').html('Battery level: ' + (battery.level * 100).toFixed() + '%')
battery.onlevelchange = function() {
$('#level').html('Battery level: ' + (this.level * 100).toFixed() + '%')
$('.progress-bar').css('width', this.level * 100 + '%');
};
});