QrDroid


Tuesday, 3 May 2016

Display Battery Status using HTML and CSS

In this tutorial, we'll design and display battery status using HTML , CSS , animations and show effects.  Today, we will start by creating a very cool and realistic battery levels with CSS3 properties, and add a CSS3 animations for giving the battery levels effects.
This tutorial only explains how to design and display battery status from your web page. It does not retrieve and display current status of your device battery.

HTML CODE
First we’ll create the HTML in order to get an empty battery display
<html>
  <head>
  <title>Display Battery Status using HTML and CSS</title>
      <link href="battery.css" rel="stylesheet" type="text/css">
      <body>
      <div class="battery-level-control-eq">
<div class="levels-eq">
<div class="eq">
</div>
</div>
<div class="status">
<div class="status-info">
<div>
0 %</div>
<div>
20 %</div>
<div>
40 %</div>
<div>
60 %</div>
<div>
80 %</div>
<div>
100 %</div>
<div>
Empty</div>
</div>
</div>
</div>
<button class="charge-btn" onclick="charge()"></button>
  </body>
</html>

CSS CODE
Now, we need to display a border around the div and a small rectangle. This CSS code is  to make the structure design and control the layout of battery.
.battery-level-control-eq { 
  margin-left:200px;
  margin-top:60px;
}
.levels-eq{
  margin-top:50px;
  border:5px solid #666;
  border-radius:2px;
  background-color:#CC3333;
  height:450px; 
  width:200px; 
  float:left;
  animation:mp-eq1-bg 10.5s;
  -webkit-animation:mp-eq1-bg 10.5s;
  -moz-animation:mp-eq1-bg 10.5s;
 
}
.eq{
  width:200px;
  height:450px;
  background-color:#fff;
  animation:mp-eq1 10.5s ;
  -webkit-animation:mp-eq1 10.5s;
  -moz-animation:mp-eq1 10.5s;
}
Class ".battery-level-control-eq" used to control the layout of battery. Class ".levels-eq" used  to make the layout of battery and it also controls the battery levels background (means changing the background color automatically with the help of animation:mp-eq1-bg 10.5s;).  Class ".eq" used for changing the height of levels automatically using the animations css property.

CSS code for changing the background color of battery levels
The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another. During the animation, you can change the set of CSS styles many times.
@keyframes mp-eq1-bg{
 20%{
    transition:all 16s ease-in-out;
    background-color:#CC3333;
   }
 40%{
   transition:all 16s ease-in-out;
   background-color:#CC3366;
  }
60%{
   transition:all 16s ease-in-out;
   background-color:#FFCC66;
   }
80%{
   transition:all 16s ease-in-out;
   background-color:#FFCC00;
   }
95%{
   transition:all 16s ease-in-out;
   background-color:#66CC33;
  }}

CSS code for changing the height of battery levels
Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
@keyframes mp-eq1{
 20%{
    transition:all 16s ease-in-out; 
    height:400px;
   }
 40%{
   transition:all 16s ease-in-out;
   height:300px;
   }
 60%{
   transition:all 16s ease-in-out;
   height:200px;
   }
 80%{
   transition:all 16s ease-in-out; 
   height:100px
   }
95%{
   transition:all 16s ease-in-out; 
   height:0px;
  }}

CSS code to display the battery levels status
When levels are automatically incremented then display the battery status (how much battery charged).
.status {
    width:100px;
    height:100px;
    overflow:hidden;
 float:left;
 margin-left:100px;
 margin-top:200px;
}
.status-info{
    width:auto;
    animation: info 18s infinite;
    animation-fill-mode: backwards;
    animation-timing-function: steps(10);
 animation-iteration-count: 1;
}
.status-info div {
    float:right;
    text-align:center;
    width:100px;
    height:100px;
 font-size:25px;
 font-weight:300;
    line-height:100px;
    display:inline-block;
}
 
@-webkit-keyframes info {
    0% {
        margin-right:0px
    }
    100% {
        margin-right:-1000px;
    }
}

CSS code of charge button
Class ".charge-btn" is used  to design the button and also to change the background color of button using animation:btn 10.5s; css property.
.charge-btn{
 animation:btn 10.5s ;
 -webkit-animation:btn 10.5s;
 -moz-animation:btn 10.5s;
 border:2px solid rgba(255,255,255,0.4);
 padding:10px;
 font-size:17px;
 color:#f5f5f5;
 cursor:pointer;
 border-radius:2px;
}
.charge-btn::before{
 content: "click to charge battery";
}
@keyframes btn{
20%{
 transition:all 16s ease-in-out;
 background-color:#CC3333;
}
40%{
 transition:all 16s ease-in-out;
 background-color:#CC3366;
}
60%{
 transition:all 16s ease-in-out;
 background-color:#FFCC66;
}
80%{
 transition:all 16s ease-in-out;
 background-color:#FFCC00;
}
95%{
 transition:all 16s ease-in-out;
 background-color:#66CC33;
}}

JAVASCRIPT CODE To reload the page.
<script>
  function charge() {
    location.reload(); 
   }
</script>
Finally Display Battery Status Done !
If you want to make real display battery status application then use JavaScript APIs that allow developers to communicate with the device system including retrieving battery status. That’s all, head over to the demo page to see it in action.


5 comments:


  1. Thank you for sharing this ultimate information with us. This is really helpful for me.

    ReplyDelete
  2. woo awesome effects. thank for sharing this tutorial. :)

    ReplyDelete
  3. I really thankful to you for providing this tutorial page which helps me a lot and clears my doubt too.....

    ReplyDelete

 

Version 20.2.1 - 2016 - 2018 - © SSL Technologies And Services Private Limited | Made in India. | Copyright Content