<!-- progress bar -->

<div class="show-container">
  <div class="progress" id="progressBar">
    <div class="progress-number" aria-valuenow="0" style="left: 0;"></div>
    <div class="rounded">
      <div class="progress-bar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
      </div>
    </div>
  </div>
  <div class="button-container">
    <a href="#" id="loadBtn" class="button">Load stuff</a>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400,300);

body {
  font-family: 'Open Sans', sans-serif;
}

.show-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
    
  width: 350px;
}  

.rounded {
  height: 100%;
  border-radius: 999px;
  overflow: hidden; 
  transform: translateZ(0);
}

.progress-container {
  position: relative;
}
 
.progress {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #e7edf4;
  border-radius: 99px;

  .progress-bar {
    position: relative;
    height: 100%;
    background-color: #00c0fb;
    transition: width .2s linear;
  }
  
  .progress-number {
    position: absolute;
    left: 0;
    top: 0;
    transition: transform .2s linear; 
     
    &:before { 
      content: "";
      position: absolute; 
      top: -10px;
      left: 0;
      transform: translateX(-50%);
      border-top: 5px solid #525961;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
    } 
    
    &:after {
      content: attr(aria-valuenow);
      position: absolute;
      left: 0; 
      top: -10px;
      transform: translate(-50%,-100%);
      padding: 4px 10px;  
      color: #fff;
      font-size: 13px;
      font-weight: 300;
      background-color: #525961;
      border-radius: 3px;
    }   
  }
}

.button-container {
  display: block;
  text-align: center;
  padding: 60px 0;
}

.button {
  color: #1F2225;
  font-weight: 400;
  text-decoration: none;
  border: 2px solid #525961;
  padding: 10px 25px; 
  transition: all .15s ease-in-out;
  &:hover {
    background-color: #525961;
    color: #fff; 
  } 
} 

$(document).ready(function(){
 var timer=0;
 var percentageWidth = $('#progressBar').outerWidth()/100;
  function timerRun(){
    $('#progressBar .progress-bar').css("width", timer + "%").attr("aria-valuenow", timer);
    
    $('#progressBar .progress-number').css("-webkit-transform", "translateX(" + percentageWidth*timer + "px)").attr("aria-valuenow", timer);
    
    if(timer >= 100){  
      $('#progressBar .progress-bar').css("width","100%");
      $('#loadBtn').html("Done");
      return;
    }
    timer++;
    setTimeout(function(){timerRun()},200);
  }
  
  $('#loadBtn').click(function(e){
    e.preventDefault();
    $(this).html("loading");
    timerRun();
  });
});