<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 + '%');
    };
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  3. https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/css/bootstrap-material-design.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
  2. //maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js