Charging Battery

Fontawesome animations that make sense!

by Andy Challis

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<span class="fa-stack fa-5x battery">
  <i class="fa fa-battery-empty fa-stack empty"></i>
  <i class='fa fa-battery-4 fa-stack animate'></i>
</span>

CSS

.empty{
  color:#444;
}

.battery .animate{
  width:0%; 
  position:absolute;
  top:5%; 
  overflow: hidden;
  color:#27ae60;
  z-index: -1;
  -webkit-transition:all 5s ease;
  -moz-transition:all 5s ease;
  transition:all 5s ease;
  left: 0px;
}

.battery:hover .animate{
  width:100%;
}