Im testing out this simple loading animation while the page loads, after the page should be displayed or in this case, a video. Problem is that the animation keeps on going forever despite the page/ video already being loaded . The video is being embed via youtube. Here is the code
note : Youtube video ID is an example, it does not lead anywhere but the video does load
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";
});
Been trying to figure out the problem myself, any help would be greatly great. Thanks everyone.
Your code seems to work. But you can try to add the onload attribute to your iframe to hide the loader when iframe is loaded.
PS. I also change the selector to ID and added an id to you loader element, because it could be that you have a multiple loader on your page.
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>