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