Add a spinner to a submit button for slow forms

If you have a form that is slow to submit, this is a simple way to replace the submit button with a spinner.

You may need to change the two selectors in the Javascript to be more specific, or different. Border-color may also want to be different, that’s the color of the spinner.

<script>document.querySelector('form').addEventListener('submit',function(){
document.querySelector('[type=submit]').className+=' spin';});</script>
<style>
.spin:before {
  content: '';
  display: inline-block;
  position: absolute;
  border: 1px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-top: -1.5ex;
  margin-left: -1.5ex;
  width: 3ex;
  height: 3ex;
  animation: spin 3s linear infinite;
}
.spin {
  color: transparent;
  position: relative;
}
</style>