<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;
}
}
View Compiled
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)
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.