<div class="show-container">
<div id="myDiv" style="background-color: lightblue;width: 0;height: 20px;line-height: 20px;" class="progress">0%</div>
<button id="btn">Run</button>
</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%);
  text-align: center;
  width: 500px;
}  

 
.progress {
  position: relative;
  width: 100%;
  height: 20px;
  background-color: #e7edf4;
  border-radius: 99px;
  margin-bottom: 20px;
  text-align: left;
}


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; 
  } 
} 

let timer
let btn = document.getElementById('btn')
let myDiv = document.getElementById('myDiv')
btn.addEventListener('click', () => {
  clearInterval(timer);
  myDiv.style.width = '0';
  timer = setInterval(() => {
    if(parseInt(myDiv.style.width) < 500){
      myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
      myDiv.innerHTML =     parseInt(myDiv.style.width)/5 + '%';    
    }else{
      clearInterval(timer);
    }        
  },16);
}, false)