GSAP

HTML

<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
<div class="wrapper">
    <svg id="battery" enable-background="new 0 0 512 512" height="512px" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="256" cy="256" fill="#FFCA66" r="256" />

  <g class="battery">
      <rect class="background" fill="#40535C" height="172.97" width="244.091" x="113.712" y="168.212" />

      <g class="charge">
        <rect class="top" fill="#8DC63F" height="167.712" width="1px" x="119.272" y="169.47"  />
        <rect class="bottom" opacity="0.05" fill="#000" height="86.636" width="1px" x="114.045" y="255.772" />
      </g>

      <g class="outline">
        <path d="M379.425,203.045h-7.546v105.546h7.546c17.515,0,31.727-14.061,31.727-31.409v-42.728 C411.151,217.105,396.939,203.045,379.425,203.045z" fill="#FFFFFF" />
        <path d="M341.182,179.333c5.546,0,10.076,4.697,10.076,10.47v132.409c0,5.758-4.53,10.47-10.076,10.47H131.863 c-5.561,0-10.075-4.712-10.075-10.47V189.803c0-5.772,4.515-10.47,10.075-10.47H341.182 M341.182,158.394H131.863    c-17.121,0-31.015,14.061-31.015,31.409v132.409c0,17.333,13.894,31.394,31.015,31.394h209.318    c17.121,0,31.016-14.061,31.016-31.394V189.803C372.197,172.454,358.303,158.394,341.182,158.394L341.182,158.394z" fill="#FFFFFF" />
      </g>
  </g>
</svg>
</div>

CSS

.wrapper {
    margin: 30px;
}

#battery {
    width: 500px;
}

JavaScript

var battery = document.getElementById('battery');

var chargeTop =  battery.querySelector('.charge .top');
var chargeBottom = battery.querySelector('.charge .bottom');

var green = '#8DC63F';
var lime = '#d1df37';
var yellow = '#F9ED32';
var orange = '#f5a52e';
var red = '#F15A29';

var player = chargeTop.animate([
    {
        transform: 'translate(119px,0) scaleX(0)',
        fill: red,
        offset: 0
    },
    {
        fill: orange,
        offset: 2/5
    },
    {
        fill: yellow,
        offset: 3/5
    },
    {
        fill: lime,
        offset: 4/5
    },
    {
        transform: 'translate(-28510px,0) scaleX(240)',
        fill: green,
        offset: 1
    }
], {
    duration: 3000,
    iterations: Infinity
});

var player2 = chargeBottom.animate([
    {
        transform: 'translate(119px,0) scaleX(0)',
        offset: 0
    },
    {
        transform: 'translate(-27255px,0) scaleX(240)',
        offset: 1
    }
], {
    duration: 3000,
    iterations: Infinity
});