HTML CSS

ADD LOADING SPINNER TO DROPDOWN BOX

(a quick guide)

<div class="dropload"><select>    <option>First</option>    <option>Second</option>  </select></div>

HTML - WRAP DROPDOWN IN DIV

01

CREATE SPINNER WITH ::BEFORE .dropload::before {   content: "";   background-image: url("loading.gif");   background-repeat: no-repeat;   background-position: center; }

THE CSS PART A

02

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; }

THE CSS PART B

03

"DISABLED BY DEFAULT" .dropload select {   pointer-events: none;   opacity: 0.5; }

THE CSS PART C

04

HIDE SPINNER WHEN DONE LOADING .done.dropload select {   pointer-events: auto;   opacity: 1; } .done.dropload::before { display: none; }