<div class="progress-bar"></div>
<h1 class="count"></h1>

@import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300);

body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  font-family: 'Raleway';
  overflow: hidden;
}

.progress-bar {
  position: absolute;
  top: 50%;
  height: 2px;
  background: #af71af;
}

.done {
  top: 0;
  height: 100%;
  width: 100%;
  transition: all .33s ease;
}

.count {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-weight: 100;
  font-size: 3em;
  margin-top: -1.33em;
  color: #af71af;
}

var body = document.querySelector('body'),
    bar = document.querySelector('.progress-bar'),
    counter = document.querySelector('.count'),
    i = 0,
    throttle = 0.7; // 0-1

(function draw() {
  if(i <= 100) {
    var r = Math.random();
    
    requestAnimationFrame(draw);  
    bar.style.width = i + '%';
    counter.innerHTML = Math.round(i) + '%';
    
    if(r < throttle) { // Simulate d/l speed and uneven bitrate
      i = i + r;
    }
  } else {;
    bar.className += " done";
  }
})();