<section>
  <div class="progress-bar">
    <div class="polyfill" id="anim"></div>
  </div>
</section>
<ul id="output"></ul>

section {
  width: 408px;
  margin: 80px auto;
}

body {
  background: #292d33;
}

@keyframes gradientMove {
  0% {
    background-position: 0px 0px;
  }

  100% {
    background-position: 100px 0px;
  }
}

@keyframes reload {
  0% {
    width: 20px;
  }

  95% {
    width: 400px;
  }

  100% {
    width: 20px;
  }
}

.progress-bar {
  width: 400px;
  background: #1a1e22;
  padding: 3px;
  border-radius: 50px;
  box-shadow: inset 0px 1px 1px 0px black, 0px 1px 1px 0px #36393F;
}

#anim {
  width: 400px;
  height: 25px;
  background: #bedc78;
  background-size: 35px 25px;
  border-radius: 50px;
  box-shadow: inset 0px 1px 3px 0px #F2F2F2;
  animation:reload 8s 2 linear;
}

function listener(e) {
      var l = document.createElement("li");
      switch(e.type) {
        case "animationstart":
          l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
          break;
        case "animationend":
          l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
          break;
        case "animationiteration":
          l.innerHTML = "New loop started at time " + e.elapsedTime;
          break;
      }
      document.getElementById("output").appendChild(l);
    }
    
    function setup() {
      var e = document.getElementById("anim");
      e.addEventListener("animationstart", listener, false);
      e.addEventListener("animationend", listener, false);
      e.addEventListener("animationiteration", listener, false);
      
      var e = document.getElementById("anim");
      e.className = "slidein";
      
    }

setup();