Cacher is the code snippet organizer for pro developers

.battWrapper{
  width:31px;
  height:16px;
}
.battWrapper > div{
  float:left;
}
.battWrapper .battBody{
  border:1px solid #427314;
  height:14px;
  width:24px;
  border-radius:2px;
}
.battWrapper .battPin{
  border:1px solid #427314;
  border-left:none;
  height:5px;
  margin-top:4px;
  width:3px;
  border-radius:0 2px 2px 0;
}
.battWrapper .battCharge{
  border:1px solid #fff;
  background-color:#427314;
  width:22px;
  height:12px;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

function setBatteryCharge(/*string*/id, /*number 0..100*/ porc){
  var FACTOR = 22; //22 es 100% - medidas fijas
  var $battCharge = $("#"+id+" .battCharge");
  var anchura = Math.ceil(FACTOR * porc / 100);
  $battCharge.width(anchura+"px");
}
//llamamos por ejemplo con una valor de 66%
setBatteryCharge("battDisplay", 66);

<div id="battDisplay" class="battWrapper">
  <div class="battBody">
    <div class="battCharge"></div>
  </div>
  <div class="battPin"></div>
</div>