1

Tengo un spinner mientras se carga la web y lo que quiero es mostrarlo durante 10 segundos antes de que se ejecute la función encargada de ocultarlo y mostrar el resto.
En el html tengo dos secciones una con un spinner, quiere que se muestre durante un tiempo antes de ocultarlo, y la otra con el resto del contenido que quiero que este oculto mientras el spinner sea visible Codigo html

<section class="" id="mostrar">
    <i id="spinner" class="fas fa-spinner"></i>
</section>
<section class="container">
    Contenido
</section>
<script src="../js/spinner/sp.js"></script>

En el css defino una animación para el spinner Codigo css

#mostrar{
    z-index: 1000;
}

#spinner {
    font-size: 50px;
    color: red;
    animation: 2s rotate ease-in-out infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

El javascript es el encargado de ocultar el spinner para mostrar el resto del contenido html Codigo js

window.onload = function(){
    setTimeout(prueba, 10000);
}

function prueba () {
    var contenedor = document.getElementById('mostrar');

    contenedor.style.visibility = 'hidden';
    contenedor.style.opacity = '0';
}

1 respuesta 1

3

Generalmente se usa un contenedor que ocupe toda la pantalla para mostrar el spinner y se oculta al completar la carga de la página. Puedes hacerlo un poco más visual agregando una transición al ocultarlo.

Se necesita que el cuerpo de la página no se pueda desplazar (scroll) mientras está visible el spinner y reactivar el desplazamiento al ocultarlo. Basta con una clase para el cuerpo y otra para el spinner:

document.addEventListener('DOMContentLoaded', function() {
    // Reduje el tiempo para probar aquí
    setTimeout(prueba, 3000);
});

function prueba () {
    // Ocultar spinner
    document.getElementById('mostrar').classList.add('ocultar');
    // Activar barras de desplazamiento del cuerpo de la página
    document.body.classList.add('activo');
}
body {
    width: 100%;
    height: 100%;
    /* No mostrar barras de desplazamiento */
    overflow: hidden;
    margin: 0;
    padding: 0;
}
body.activo {
    /* Mostrar barras de desplazamiento cuando sea necesario */
    overflow: auto;
    /* Si quieres margen interno o externo (padding / margin) agrégalo aquí */
}
#mostrar {
    /* Colocar encima de todo el contenido */
    position: absolute;
    top: 0;
    z-index: 1000;
    /* Evitar que se vea lo que está debajo */
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 1;
    /* Ocultar con transición */
    transition: all 0.5s ease;
}
#mostrar.ocultar {
    /* Enviar arriba para ocultar */
    top: -100%;
    opacity: 0;
}

#spinner {
    /* Centrar en pantalla */
    position:absolute;
    top: 50%;
    left: 50%;
    font-size: 50px;
    color: red;
    animation: 2s rotate ease-in-out infinite;
}

@keyframes rotate {
    /* Centrar en pantalla y rotar */
    from {
        transform: translate(-50%, -50%)  rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<section class="" id="mostrar">
    <i id="spinner" class="fas fa-spinner"></i>
</section>
<section class="container">
    Contenido
</section>

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.