/* (A) USE ::BEFORE TO CREATE A LOADING SPINNER */ .dropload::before { content: ""; background-image: url("../images/loading.gif"); background-repeat: no-repeat; background-position: center; } /* (B) DIMENSIONS */ .dropload { max-width: 320px; } /* optional */ .dropload select, .dropload::before { width: 100%; height: 40px; } /* (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; } /* (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; }