0

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).

2 respuestas 2

0

Mire si talvez le sirve de esta manera:

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
}
.loader {
    z-index: -1;
    background-color: transparent;
    color: #3a88fe;
    font-size: 11px;
    text-indent: -99999em;
    margin: 0 auto;
    position: absolute;
    left: 45%;
    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" style="min-height:110px;">
    <div class="loader">Cargando...</div>
    <div class="enlaces_box">
        <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>

9
  • Umm, Al integrarlo en la página del sitio en la que lo quiero usar, ahora el spinner se muestra por debajo del DIV (no por encima) y el DIV con el UL ahora desaparece (como si no existiera).
    – oijm17
    el 9 dic. 2020 a las 7:59
  • ¿Podría compartir acceso a un codigo con todos los elementos que tiene la pagina donde lo va a implementar o el enlace donde tiene la pagina? el 9 dic. 2020 a las 8:19
  • Podrías editar y explicar tu código por favor, lee Cómo responder
    – user128299
    el 9 dic. 2020 a las 11:11
  • 1
    @oijm17 cambia el Z-index, eso lo moverá donde quieres
    – Excorpion
    el 9 dic. 2020 a las 14:49
  • @WillyGuevara Actualización: realicé una verificación y me encontré que NO había hecho todas las modificaciones correctamente. Entonces lo reparé, ahora el UL se puede observar mientras el Spinner es visible (el Spinner se Sobrepone al DIV) pero aproximadamente el 80 % de este, está por debajo del border del Fieldset. Estoy usando este código, corriendo en las entradas de WP.
    – oijm17
    el 9 dic. 2020 a las 20:04
0

El problema es que al agregar un z-index negativo, este se posiciona por debajo de los demás elementos, y lógicamente tiende a ocultarse, tendrías que reorganizar tu código, o agregar algunos position: relatve más y otros z-index, un lío si ya tienes definido tu html, el loading usa backgrounds en los before/after para lograr el efecto de ocultación, por lo que tal cual no te funciona, puede optar por loadings tipo los de font awesome si quieres.

Creo que usando Font Awesome sería mejor opción, ademas de poder modificar tamaño de fuente y color.

.fieldbox {
  position: relative;
}

.spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0.5;
  color: blue;
  display: flex;
  align-items:center;
  justify-content:center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"  rel="stylesheet">
<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>
<div class="fa-3x spinner">
  <i class="fas fa-circle-notch fa-spin"></i>
</div>
</fieldset>

4
  • Esto soluciona el problema de suponer el Spinner sobre el Fieldset en este caso, hay un pequeño problema, relacionado con un retraso de aproximadamente 1 segundo para tan pronto se crear el Elemento DIV "fa-3x spinner" Y se le aplican los estilos; en el primer segundo el Spinner aparece junto al margen izquierdo del elemento DIV y dentro de este (el Fieldset aumenta su tamaño porque el DIV aumenta para contener el Spinner), el Spinner aparece con su color por defecto Negro. Luego de este segundo el Spinner se pone en su lugar y cambia al color seleccionado (AZUL).
    – oijm17
    el 9 dic. 2020 a las 18:07
  • Tengo integrado FontAwesome, a través de un Hook de WP.
    – oijm17
    el 9 dic. 2020 a las 18:09
  • Estás seguro que estás cargando los estilos antes que tu html?
    – Elboy
    el 9 dic. 2020 a las 18:50
  • Revisé esta variables (el orden de carga de hojas de estilos) que mencionas, porque también pensé podría deberse a esto, pero estaba correcto; realicé la prueba al contrario (por si acaso) y tampoco.
    – oijm17
    el 9 dic. 2020 a las 23:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.