Tengo varios elementos HTML como los siguientes, y ya que no soy muy bueno con los efectos CSS, les agregué un Spinner prefabricado que me encontré en este sitio: CSS Spinner
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
}
.loader {
color: #3a88fe;
font-size: 11px;
text-indent: -99999em;
margin: 55px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before,
.loader:after {
position: absolute;
content: '';
}
.loader:before {
width: 5.2em;
height: 10.2em;
background: #ffffff;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.1em 5.1em;
transform-origin: 5.1em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.loader:after {
width: 5.2em;
height: 10.2em;
background: #ffffff;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 4.9em;
-webkit-transform-origin: 0.1em 5.1em;
transform-origin: 0.1em 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<fieldset id="descarga" class="fieldbox">
<div class="enlaces_box loader">
<ul class="enlaces">
<li class="elemento headers">
<span class="a">SERVIDOR <i class="fas fa-caret-down"></i></span><span class="b">SO <i class="fas fa-caret-down"></i></span><span class="c">FORMATO <i class="fas fa-caret-down"></i></span>
</li>
<li id="li1" class="elemento">
<span class="a"><select id="iv1" class="select_host"><option value ="">Elija Servidor</option><option value="ClickNUpload.co">ClickNUpload.co</option></select></span><span class="b"><i class="fab fa-windows"></i> 32 Bits</span><span class="c">Instalable</span>
</li>
</ul>
</div>
</fieldset>
Como pueden ver hay un FIELDSET, que a su vez anida a un DIV, que contiene una lista no ordenada. Ahora, el problema es que el Spinner CSS, al ejecutarse se sobrepone al contenido del DIV y oculta la lista no ordenada. Quiero que el Spinner se sobreponga al DIV, pero esta vez tenga un efecto de transparencia de manera que se vea todo el contenido del DIV (La lista ordenada con clase "enlaces" en este caso) y no el fondo en blanco como lo está ahora.
Se preguntarán, si voy a dejar el spinner ejecutándoselo todo el tiempo y la respuesta es negativa, ya que lo oculto modificando el CSS con Javascript, pero ese ya es otro cuento (No es lo que necesito resolver).