Loading overlay

Can be used to show users that something is happening in the background and they should wait.

For example, the user selects an option from a dropdown list and there is a delay whilst a call is made to the API. The loading animation is there to stop them thinking nothing is happening and either repeating the original action or moving on through the form which might leads to issues.

<div id="loading-overlay" aria-live="polite" aria-label="Loading. Please wait." style="display: none">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<button class="button primary" onclick="handleSubmit();">Submit</button>

Make sure to apply the loading-overlay ID to an element that is initially hidden. The child div elements are also required.

When called upon, the loading overlay is displayed full screen with a loading spinner in the middle of the screen.

Call a function like this whenever you need to display the loading overlay.

/*
 * For demo purposes the loading overlay is displayed for two seconds
 */
function handleSubmit() {
  let btn = document.getElementById("button"); // Assign button to variable
  let loading = document.getElementById("loading-overlay"); // Assign loading overlay to variable
  btn.innerHTML = "Loading..."; // Change button text to help users
  btn.disabled = true; // Disable the button to prevent additional clicks
  loading.style.display = "block"; // Show the loading overlay
  loading.setAttribute("aria-busy", "true");
  setTimeout(function () {
    // Wait for two seconds, then...
    btn.innerHTML = "Submit"; // Reset button text
    btn.disabled = false; // Re-enable the button
    loading.style.display = "none"; // Hide the loading overlay
    loading.setAttribute("aria-busy", "false");
  }, 2000);
}