Estoy probando esta animación de carga simple mientras se carga la página, después de que se muestre la página o, en este caso, un video. El problema es que la animación continúa para siempre a pesar de que la página/video ya está cargado. El video se está insertando a través de youtube. Aquí está el código
nota: la identificación del video de Youtube es un ejemplo, no conduce a ningún lado, pero el video se carga
HTML
<div class = "loadelement"><span class = "spinner"> </span></div> <iframe width = "100%" height = "530" src = "https://youtube.com/embed/EXAMPLE" title="Youtube video player " frameborder = "0" allow = "accelerometer; autoplay ; clipboard-write ; encrypted-media ; gyroscope ; picture-in-picture" allowfullscreen> </iframe>CSS
.loadelement { position : absolute ; top : 0 ; left : 0 ; height: 100vh ; width: 100%; background: #fff ; display : flex ; align-items : center ; justify-content : center ; } .spinner { width : 80px ; height : 80px ; border : 8px solid #f3f3f3 ; border-radius : 50% ; border-top : 8px solid #01101a ; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform : rotate(360deg); }}
JavaScript
let loaderel = document.querySelector(".loadelement"); window.addEventListener("load", function() { loaderel.style.display = "None"; });He estado tratando de resolver el problema yo mismo, cualquier ayuda sería genial. Gracias a todos.
Su código parece funcionar. Pero puede intentar agregar el atributo onload a su iframe para ocultar el cargador cuando se carga el iframe .
PD. También cambié el selector a ID y agregué una identificación a su elemento de cargador, porque podría ser que tenga un cargador múltiple en su página.
function hideLoader() { const loaderel = document.querySelector("#loader"); loaderel.style.display = "none"; } /* * Below also works if you don't want the iframe onload attribute * const loaderel = document.querySelector("#loader"); window.addEventListener("load", function() { loaderel.style.display = "none"; }); * */ .loadelement { position: absolute; top: 0; left: 0; height: 100vh; width: 100%; background: #fff; display: flex; align-items: center; justify-content: center; } .spinner { width: 80px; height: 80px; border: 8px solid #f3f3f3; border-radius: 50%; border-top: 8px solid #01101a; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } <div id="loader" class="loadelement"><span class="spinner"></span></div> <iframe width="560" height="315" src="https://www.youtube.com/embed/K4TOrB7at0Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen onload="hideLoader()"></iframe>