Javascript Battery Level

index.html

<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>

javascript-battery-level.markdown

Javascript Battery Level

A Pen by Alex Bulintis on CodePen.

License.

script.js

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

style.css

.main{
  width: 70%;
  margin: 5% auto;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/FezVrasta/bootstrap-material-design/master/dist/css/bootstrap-material-design.css" rel="stylesheet" />