Button Loading Spinner on Form Submit

Here is a quick way to add a loading spinner on a button when a form is submitted with JavaScript. This uses CSS and pure JavaScript, no libraries.

When the button is clicked, the loading spinner will appear directly on the button. You make it stop spinning when you want to in your JavaScript.

Sample HTML Form

<form id="your-form">
  <button type="button" id="your-button-id" class="your-own-button-style">
  	<span id="your-spinner-id" class="loading-spinner">	
  	</span>
    Click To Spin
  </button>
</form>

The CSS

There is the required CSS, and then there is the optional CSS which you don’t need to add because you probably have your own CSS styles for your buttons.

Required CSS:

#your-button-id {
  position: relative;
}

.loading-spinner {
  z-index: 1000;
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.spinner {
  min-height: 36px;
}
.spinner:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid #e5eef4;
  border-top-color: #001b2b;
  animation: spinner 1s linear infinite;
}

 

Optional CSS to style the button appearance:

.your-own-button-style {
  background: #2271b1;
  border-color: #2271b1;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 13px;

  margin: 0;
  min-height: 32px;
  padding: 0 12px;

  text-decoration: none;
  text-shadow: none;

  vertical-align: top;
  white-space: nowrap;
}
.your-own-button-style:hover {
  background: #135e96;
  border-color: #135e96;
  color: #fff;
}
.your-own-button-style:active {
  background: #135e96;
  border-color: #135e96;
  box-shadow: none;
  color: #fff;
}

The JavaScript

function setLoading(isLoading, buttonID, spinnerID) {
  var buttonID = document.getElementById(buttonID),
    spinnerID = document.getElementById(spinnerID);

  if (isLoading) {
    // Disable the button and show a spinner
    buttonID.disabled = true;
    spinnerID.classList.add("spinner");
    buttonID.style.backgroundColor = "#b2cdde";
    buttonID.style.color = "#b2cdde";
  } else {
    // reset the button
    buttonID.disabled = false;
    spinnerID.classList.remove("spinner");
    buttonID.style.color = "#ffffff";
    buttonID.style.backgroundColor = "#005b92";
  }
}

function handleSubmit(e) {
  // for forms submitted with ajax/js
  e.preventDefault();

  // start the spinner
  setLoading(true, "your-button-id", "your-spinner-id");

  // Do your processing of the form here...

  // Done with your processing.

  // reset the button
  setLoading(false, "your-button-id", "your-spinner-id");
    
}

// TO SPIN ON FORM SUBMIT:
var yourForm = document.getElementById('your-form');

// NOTE: TO INSTEAD SPIN ON BUTTON CLICK, NO FORM NEEDED, THEN USE THIS LINE INSTEAD OF THE ABOVE:
// var yourForm = document.getElementById("your-button-id");

if (yourForm) {
  
  // TO SPIN ON FORM SUBMIT:
  yourForm.addEventListener("submit", handleSubmit);

  // NOTE: TO INSTEAD SPIN ON BUTTON CLICK, NO FORM NEEDED, THEN USE THIS LINE INSTEAD OF THE ABOVE:
  // yourForm.addEventListener("click", handleSubmit);

}

Optional: To instead make the spinner spin for a certain amount of seconds then stop

In reality, you reset the button (stop the spinning) based on your form-processing logic. But if you need to make the button spinner spin for only 2 or 3 seconds, or a certain number of seconds, then you take line 32 in the JavaScript above, and you wrap it with a setLoading() like the following. This example makes the button stop spinning after 2 seconds. The number is in milliseconds.

  setTimeout(() => {
  
  // reset the button
    setLoading(false, "your-button-id", "your-spinner-id");
  
  }, "2000");// Reset the button after 2 seconds.