I have a spinner while the web is loading and what I want is to show it for 10 seconds before the function in charge of hiding it and showing the rest is executed.
In the html I have two sections, one with a spinner, I want it to be displayed for a while before hiding it, and the other with the rest of the content that I want to be hidden while the spinner is visible Code 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>
In the css I define an animation for the spinner Css code
#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);
}
}
The javascript is in charge of hiding the spinner to show the rest of the html content Codigo js
window.onload = function(){
setTimeout(prueba, 10000);
}
function prueba () {
var contenedor = document.getElementById('mostrar');
contenedor.style.visibility = 'hidden';
contenedor.style.opacity = '0';
}
A full-screen container is usually used to display the spinner and hides when the page loads complete. You can make it a bit more visual by adding a transition to hide it.
The body of the page is required to be non-scrollable while the spinner is visible and to reactivate scrolling by hiding it. Just one class for the body and one for the spinner: