Skip to content

Instantly share code, notes, and snippets.

@easella

easella/Battery Indicator

Last active November 22, 2020 01:32
Show Gist options
  • Save easella/c56759361a75873a2102412165e51785 to your computer and use it in GitHub Desktop.
Save easella/c56759361a75873a2102412165e51785 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Battery Indicator
<html>
<center>
<h2 style="color:white"><i>
The Battery Percentage Now :</i>
</h2>
</center>
&nbsp;
&nbsp;
<div id="battery"><p id="title"></p>
</div>
<head>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
navigator.getBattery().then(function(battery){
var level = battery.level;
document.getElementById("title").innerHTML=(level*100)+"%";
document.getElementById("battery").style.backgroundPosition = "100%"+(level*100)+"%";
})
})
</script>
<style type="text/css">
body{
background: #031321;
}
#battery{
width: 250px;
max-width: 75%;
height: calc(250px * 8 / 5);
background: linear-gradient(to bottom, #f33, orange, yellow,green);
background-size: 10000% 10000%;
background-position: 100% 100%;
border-radius: 15px;
margin: 0 auto;
}
#battery::before{
width: 100%;
display: block;
content: '';
height: 1.5em;
background: lightgray;
border-radius: 15px 15px 0 0;
top: -1.5em;
right: -0.5%;
}
#title{
text-align: center;
color: white;
font-weight: bold;
padding-top: 50%;
font-size: 2em;
}
</style>
</head>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment