Welcome to a tutorial on how to add a loading spinner on an HTML dropdown box. So you want to show a loading spinner on a dropdown box while the options are loading? Well, it is actually pretty straightforward with some modern CSS – Read on for the example!
ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DOWNLOAD & DEMO
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
THE DEMO
DROPDOWN LOADING SPINNER
All right, let us now get into more details on how the dropdown box loading spinner works.
PART 1) THE HTML
<!-- (A) WRAP DROPDOWN IN <DIV CLASS="DROPLOAD"> -->
<div class="dropload"><select>
<option>First</option>
<option>Second</option>
</select></div>
<!-- (B) DEMO : TOGGLE LOADING -->
<button onclick="document.querySelector('.dropload').classList.toggle('done')">
Demo - Toggle loading
</button>
- All we need in the HTML is to wrap the
<select>
in a<div class="dropload">
. - The demo button does not matter. The simple mechanism here is to add a
done
CSS class on<div class="dropload">
to toggle the loading/done loading.
PART 2) THE CSS
2A) CREATE THE LOADING SPINNER
/* (A) USE ::BEFORE TO CREATE A LOADING SPINNER */
.dropload::before {
content: "";
background-image: url("loading.gif");
background-repeat: no-repeat;
background-position: center;
}
Just how does the CSS work? The whole idea here is to attach the loading spinner in .dropload::before
as the background-image
.
2B) DEFINE DIMENSIONS
/* (B) DIMENSIONS */
.dropload { max-width: 320px; } /* optional */
.dropload select, .dropload::before {
width: 100%;
height: 40px;
}
But of course, the spinner will look very ugly if the <select>
is “flat and compact”. So just make sure to give it some room, set a decent height
.
2C) “LAYER” THE LOADING SPINNER
/* (C) POSITION LOADING SPINNER OVER DROPDOWN */
.dropload { position: relative; }
.dropload select { z-index: 1; }
.dropload::before {
position: absolute;
top: 0; left: 0;
z-index: 2;
}
Now that both the spinner image and dropdown selector are set, we need to “layer” them properly – The dropdown selector is at the bottom, and the spinner overlays on top.
2D) TOGGLING THE SPINNER
/* (D) "DISABLED BY DEFAULT" */
.dropload select {
pointer-events: none;
opacity: 0.5;
}
/* (E) HIDE SPINNER WHEN DONE LOADING */
.done.dropload select {
pointer-events: auto;
opacity: 1;
}
.done.dropload::before { display: none; }
- (D) Lastly, we will “disable” the selector with
pointer-events: none
by default. - (E) After the loading is complete – We use
.done.dropload
to “enable” the selector, and hide the spinner using.done.dropload::before
.
EXTRA BITS & LINKS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
USING THIS WITH AJAX
All right, one last extra quick example – How we can use this with AJAX fetch.
<!-- (A) DROPDOWN AS USUAL -->
<div class="dropload" id="demo"><select></select></div>
<script>
// (B) AJAX LOAD OPTIONS FROM SERVER
fetch("YOUR-URL")
.then(res => res.json())
.then(data => {
// (B1) GENERATE OPTIONS WITH DATA
console.log(data);
// (B2) ENABLE SELECTOR
document.getElementById("demo").classList.add("done");
});
</script>
LINKS & REFERENCES
- Loading Spinner Generators
- Full-Screen Loading Spinner – Code Boxx
THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!