HTML, CSS : How to implement loading buttons

The simplest way is how it is done


  Loading

/* Style buttons */
.buttonload {
  background-color: #4CAF50; /* Green background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 16px /* Set a font size */
}

Another option is to use the library

https://loading.io/button/

Its quite nice and easy. Basically, below is what to be done



function animateDivForLoading(buttonid,add){
var element = document.getElementById(buttonid);
if(element){
if(add){
element.classList.add('running');
}
else {
element.classList.remove('running');
}
}
}

references:
https://www.w3schools.com/howto/howto_css_loading_buttons.asp
https://loading.io/button/