Skip to main content

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">
<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 = "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 = "none"; // Hide the loading overlay
loading.setAttribute("aria-busy", "false");
}, 2000);