<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; 
  } 
} 
const btn = document.getElementById('btn')
const myDiv = document.getElementById('myDiv')
let timer;
btn.addEventListener('click', () => {
    clearTimeout(timer);
    myDiv.style.width = '0';
    timer = setTimeout(function fn(){
        if(parseInt(myDiv.style.width) < 500){
            myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
            myDiv.innerHTML =     parseInt(myDiv.style.width)/5 + '%';
            timer = setTimeout(fn,16);
        }else{
            clearTimeout(timer);
        }    
    },16);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.