<button type="submit" class="loaderbutton" id="submit">Click Me!</button>

.loaderbutton {
  padding: 10px 30px;
  background: #3e52c1;
  border: none;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2em;
  position: relative;
  display: block;
}

.loaderbutton::after {
  content: '';
  display: block;
  width: 1.1em;
  height: 1.1em;
  position: absolute;
  left: calc(50% - 0.75em);
  top: calc(50% - 0.75em);
  border: 0.2em solid transparent;
  border-right-color: white;
  border-radius: 50%;
  animation: loader-animation 0.7s linear infinite;
  opacity: 0;
}

@keyframes loader-animation {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.loaderbutton.loading {
  color: transparent;
}

.loaderbutton.loading::after {
  opacity: 1;
}

const animBtn = document.getElementById("submit");

animBtn.addEventListener('click', () => {
  animBtn.classList.add("loading");
  //The following is used for demo purposes only//
  setTimeout(() => animBtn.classList.remove("loading"), 5000);
});