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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.