<div class="loading">Submit</div>
body {
position: relative;
height: 100vh;
overflow: hidden;
}
.loading {
width: 150px;
height: 40px;
border: 5px solid #2FCE9E;
border-radius: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%), rotate(0deg);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
color: #2FCE9E;
transition: all .5s;
margin: -20px -75px;
}
.loading:hover {
cursor: pointer;
}
.loading.is-loading {
transition: all .17s ease-out;
color: transparent;
width: 40px;
height: 40px;
border: 5px solid #B9B9B9;
border-top: 5px solid #2FCE9E;
border-radius: 50%;
animation: rotate 1s infinite linear;
transform-origin:center center;
margin: -20px;
}
.loading.finish {
transition: all .2s;
color: #fff;
background-color: #2FCE9E;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
var loading = document.getElementsByClassName('loading')[0];
loading.addEventListener('click', function(event) {
loading.className += ' is-loading';
setTimeout(function() {
loading.className = 'loading finish';
loading.innerHTML = 'Finish';
}, 3000);
setTimeout(function() {
loading.className = 'loading';
}, 4000);
setTimeout(function() {
loading.innerHTML = 'Submit';
}, 4100);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.