<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();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.