<div class="demo">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>

<div class="nav">
  <button id="pause">pause</button>
</div>

body {
  background:#1d1d1d;
  padding: 50px;
}

.demo {
  position:relative;
  margin:20px auto;
  width:500px;
  height:28px;
  background-color:#121212;
  border-radius:12px;
  overflow:hidden;
  border:solid 4px #121212;
}

.circle {
  width:20px;
  height:20px;
  background-color:#86cc01;
  position:absolute;
  border-radius:50%;
  display:inline-block;
  left:-20px;
  top:4px;
}
button {
  padding:10px;
  margin:0 10px;
  width:120px;
  cursor:pointer;
}

.nav {
  width:100%;
  margin:auto;
  text-align:center;
}

var pauseBtn = document.getElementById("pause"),
    tl = new TimelineMax();

tl.staggerTo(".circle", 1.5, {x:540, repeat:-1, repeatDelay:0.5, force3D:true, ease:SlowMo.ease.config(0.2, 0.5)}, 0.15)

pauseBtn.onclick = function() {
  tl.paused(!tl.paused());
  pauseBtn.innerHTML = tl.paused() ? "play" : "pause";
}