Battery by @fei on dribbble: http://dribbble.com/shots/1209794-Battery
Forked from Felix De Montis's Pen Battery.
For more on the Battery API see David Walsh's article.
Battery by @fei on dribbble: http://dribbble.com/shots/1209794-Battery
Forked from Felix De Montis's Pen Battery.
For more on the Battery API see David Walsh's article.
<!-- The Battery API Requires Firefox 28+ --> | |
<div class="battery"></div> | |
<div class="battery-status"></div> | |
<div class="battery-level"></div> | |
<!-- Battery Status: .p0 - p100 --> |
var batteryStatus = document.querySelector(".battery-status"); | |
var batteryLevel = document.querySelector(".battery-level"); | |
var batteryIcon = document.querySelector(".battery"); | |
var batteryPercentage = 0; | |
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; | |
if ( !battery ){ | |
batteryStatus.textContent = "Battery API Not Supported!"; | |
} else { | |
batteryLevel.style.visibility = "visible"; | |
batteryStatus.textContent = battery.charging ? "Charging" : "Unplugged"; | |
batteryLevel.textContent = battery.level * 100 + "%"; | |
batteryPercentage = Math.round(battery.level * 10) * 10; | |
batteryIcon.classList.add("p"+batteryPercentage); | |
battery.addEventListener("levelchange", function(e) { | |
var batteryLevelClass = batteryIcon.className.match(/p.+/); | |
batteryIcon.classList.remove(batteryLevelClass); | |
batteryPercentage = Math.round(battery.level * 10) * 10; | |
batteryIcon.classList.add("p"+batteryPercentage); | |
batteryLevel.textContent = battery.level * 100 + "%"; | |
}, false); | |
battery.addEventListener("chargingchange", function(e) { | |
batteryStatus.textContent = battery.charging ? "Charging" : "Unplugged"; | |
}, false); | |
// NOT IMPLEMENTED YET | |
battery.addEventListener("chargingtimechange", function(e) { | |
// battery.chargingTime | |
}, false); | |
battery.addEventListener("dischargingtimechange", function(e) { | |
// battery.dischargingTime | |
}, false); | |
} |
html { font-size: 0.625em } | |
body { | |
background-color: #000; | |
margin: 0; | |
padding: 0; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin-left: -15.225em; | |
} | |
.battery-level, | |
.battery-status { | |
padding: 6px; | |
text-align: center; | |
color: white; | |
font-size: 18px; | |
font-family: Arial, sans-serif; | |
border: 4px solid #ccc; | |
display: inline-block; | |
margin-left: 1em; | |
} | |
.battery-level { | |
visibility: hidden; | |
} | |
.battery { | |
height: 3.8em; | |
width: 2.2em; | |
background-color: transparent; | |
box-sizing: border-box; | |
border: .3em #ffffff solid; | |
float: left; | |
display: block; | |
margin-left: 2.4em; | |
} | |
.battery::before { | |
content: ""; | |
height: .4em; | |
width: 1em; | |
background-color: #ffffff; | |
position: absolute; | |
margin-top: -.7em; | |
margin-left: .3em; | |
} | |
.battery::after { | |
content: ""; | |
background-color: #ffffff; | |
width: 1.2em; | |
position: absolute; | |
margin-left: .2em; | |
} | |
.battery.p0::after { | |
height: 2.8em; | |
margin-top: .2em; | |
background: | |
linear-gradient(113deg, | |
rgb(235, 106, 66) 0%, | |
rgb(235, 106, 66) 46%, | |
rgb(85, 85, 87) 46%, | |
rgb(85, 85, 87) 54%, | |
rgb(235, 106, 66) 54%, | |
rgb(235, 106, 66) 100%); | |
} | |
.battery.pCharging::after { | |
height: 2.8em; | |
margin-top: .2em; | |
background: | |
linear-gradient(113deg, | |
rgb(243, 243, 18) 0%, | |
rgb(0, 106, 66) 50%, | |
rgb(0, 0, 0) 50%, | |
rgb(0, 0, 0) 60%, | |
rgb(0, 106, 66) 60%, | |
rgb(243, 243, 18) 100%); | |
} | |
.battery.p10::after { | |
height: .3em; | |
margin-top: 2.7em; | |
background-color: rgb(235, 106, 66); | |
} | |
.battery.p20::after { | |
height: .6em; | |
margin-top: 2.4em; | |
background-color: rgb(235, 106, 66); | |
} | |
.battery.p30::after { | |
height: .8em; | |
margin-top: 2.2em; | |
background-color: rgb(235, 106, 66); | |
} | |
.battery.p40::after { | |
height: 1em; | |
margin-top: 2em; | |
background-color: #C0A32E; | |
} | |
.battery.p50::after { | |
height: 1.6em; | |
margin-top: 1.4em; | |
background-color: #C0A32E; | |
} | |
.battery.p60::after { | |
height: 1.9em; | |
margin-top: 1.1em; | |
background-color: #C0A32E; | |
} | |
.battery.p70::after { | |
height: 2.1em; | |
margin-top: 0.9em; | |
background-color: #C0A32E; | |
} | |
.battery.p80::after { | |
height: 2.2em; | |
margin-top: 0.8em; | |
background-color: #288528; | |
} | |
.battery.p90::after { | |
height: 2.5em; | |
margin-top: 0.5em; | |
background-color: #288528; | |
} | |
.battery.p100::after { | |
height: 2.8em; | |
margin-top: 0.2em; | |
background-color: #288528; | |
} | |
.battery:first-child { margin-left: 0 } |