Loading Spinner On HTML Dropdown Box (Simple Example)

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

1-drop-load.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>
  1. All we need in the HTML is to wrap the <select> in a <div class="dropload">.
  2. 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

2-drop-load.css
/* (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

2-drop-load.css
/* (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

2-drop-load.css
/* (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

2-drop-load.css
/* (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

 

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!

Leave a Comment

Your email address will not be published. Required fields are marked *