Works on Firefox only
A Pen by Cezar Luiz on CodePen.
Works on Firefox only
A Pen by Cezar Luiz on CodePen.
<div class="container"> | |
<div class="battery is-charging"> | |
<div class="battery-status"></div> | |
<p class="battery-level">0%</p> | |
</div> | |
<!-- Battery Status --> | |
<ul class="battery-values"> | |
<li class="if-charging"></li> | |
<li class="charging-time"></li> | |
<li class="discharging-time"></li> | |
</ul> | |
</div> |
var bat = navigator.battery, | |
batContainer = document.querySelector('.battery'), | |
batStatus = document.querySelector('.battery-status'), | |
batLevel = document.querySelector('.battery-level'), | |
ifCharging = document.querySelector('.if-charging'), | |
chargingTime = document.querySelector('.charging-time'), | |
dischargingTime = document.querySelector('.discharging-time'), | |
critical = 0.2; // 20% | |
if (bat) { | |
// Check when the battery level change and when is in critical condition | |
var changeBatteryStatus = function() { | |
batStatus.style.width = (bat.level * 100) + '%'; | |
if (bat.level <= critical) { | |
batContainer.classList.add('is-critical'); | |
} else if (bat.level == 1) { | |
batContainer.classList.add('is-complete'); | |
} else { | |
batContainer.classList.remove('is-critical'); | |
batContainer.classList.remove('is-complete'); | |
} | |
}; | |
// Change the percentual text in DOM | |
var changeBatteryLevelText = function() { | |
batLevel.textContent = parseInt(bat.level * 100) + '%'; | |
}; | |
// Check if the battery is charging | |
var checkBatteryCharging = function () { | |
var charging = ''; | |
if (bat.charging) { | |
batContainer.classList.add('is-charging'); | |
batContainer.classList.remove('is-critical'); | |
batContainer.classList.remove('is-complete'); | |
charging = 'Yes'; | |
} else { | |
batContainer.classList.remove('is-charging'); | |
// Check is battery is critical | |
changeBatteryStatus(); | |
charging = 'No'; | |
} | |
ifCharging.textContent = 'Is charging? ' + charging; | |
}; | |
// Check the battery is not charging and the time to the end | |
var dischargingTimeString = function () { | |
var discharging = ''; | |
if (bat.dischargingTime != 'Infinity') { | |
discharging = 'Time to end in ~ ' + window.moment().seconds(bat.dischargingTime).format('HH:mm:ss'); | |
} | |
dischargingTime.textContent = discharging; | |
}; | |
// Check if battery is charging and its time to complete the charge | |
var chargingTimeString = function () { | |
var charging = ''; | |
if (bat.chargingTime != 'Infinity') { | |
charging = 'Time to complete the charge in ~ ' + window.moment().seconds(bat.chargingTime).format('HH:mm:ss'); | |
} | |
chargingTime.textContent = charging; | |
}; | |
// When the battery level down | |
bat.addEventListener('levelchange', function() { | |
changeBatteryLevelText(); | |
changeBatteryStatus(); | |
}, false); | |
// When the battery is charging | |
bat.addEventListener('chargingchange', function() { | |
checkBatteryCharging(); | |
}, false); | |
// When the battery is discharging | |
bat.addEventListener('dischargingtimechange', function() { | |
dischargingTimeString(); | |
}); | |
// When the battery is charging | |
bat.addEventListener('chargingtimechange', function() { | |
chargingTimeString(); | |
}); | |
// Set battery level status | |
changeBatteryStatus(); | |
changeBatteryLevelText(); | |
checkBatteryCharging(); | |
dischargingTimeString(); | |
chargingTimeString(); | |
} else { | |
document.querySelector('.container').innerHTML = '<p class="no-support">Sorry, your browser does not support the Battery API :/ <br> Test in Firefox only devices with a battery as notebooks or Firefox OS :)</p>'; | |
} |
* { | |
-moz-box-sizing: border-box; | |
} | |
body { | |
font-size: 16px; | |
font-family: 'Raleway', sans-serif; | |
color: #000; | |
font-weight: 300; | |
background: #f0f0f2; | |
} | |
.battery { | |
width: 50%; | |
margin: 0 auto; | |
border: 15px solid #99ca3b; | |
height: 100px; | |
position: relative; | |
border-radius: 10px; | |
margin-top: 100px; | |
transition: .5s; | |
} | |
.battery::after { | |
content: ' '; | |
width: 15px; | |
height: 40px; | |
background: #99ca3b; | |
top: 50%; | |
margin-top: -20px; | |
right: -25px; | |
position: absolute; | |
} | |
.battery-status { | |
width: 0%; | |
height: 100%; | |
background: #99ca3b; | |
transition: .5s; | |
} | |
.battery-level { | |
color: #333; | |
font-size: 36px; | |
position: absolute; | |
top: 15px; | |
left: 20px; | |
} | |
.is-charging { | |
animation: isCharging 1s infinite alternate; | |
} | |
.is-critical { | |
border-color: #ca3b3b; | |
} | |
.is-critical .battery-status, .is-critical::after { | |
background: #ca3b3b; | |
} | |
.is-critical .battery-level { | |
color: #FFF; | |
} | |
.is-complete { | |
box-shadow: #99ca3b 0 0 30px 10px; | |
} | |
@keyframes isCharging { | |
to { | |
box-shadow: #99ca3b 0 0 30px 10px; | |
} | |
} | |
/* Battery values */ | |
.battery-values { | |
text-align: center; | |
padding: 30px 10px; | |
} | |
.battery-values li { | |
margin: 10px 0; | |
font-size: 24px; | |
} | |
/* Not support */ | |
.no-support { | |
font-size: 36px; | |
text-align: center; | |
padding: 40px 10px; | |
line-height: 70px; | |
} |