HTML CSS
(a quick guide)
<div class="dropload"><select> <option>First</option> <option>Second</option> </select></div>
CREATE SPINNER WITH ::BEFORE .dropload::before { content: ""; background-image: url("loading.gif"); background-repeat: no-repeat; background-position: center; }
SET DIMENSIONS .dropload select, .dropload::before { width: 100%; height: 40px; }
LAYER SPINNER OVER DROPDOWN .dropload { position: relative; } .dropload select { z-index: 1; } .dropload::before { position: absolute; top: 0; left: 0; z-index: 2; }
"DISABLED BY DEFAULT" .dropload select { pointer-events: none; opacity: 0.5; }
HIDE SPINNER WHEN DONE LOADING .done.dropload select { pointer-events: auto; opacity: 1; } .done.dropload::before { display: none; }