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

 

 

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

Demo – Toggle spinner

 

 

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>

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

/* (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.

 

 

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
  • loading.io
  • preloaders
  • AJAX loading images
• Full-Screen Loading Spinner – Code Boxx