我正在测试这个简单的加载动画,当页面加载时,页面应该显示出来,或者在这种情况下,一个视频。问题是,尽管页面/视频已经加载,但动画仍会一直持续。视频正在youtube上嵌入。
这是密码
注意:Youtube video ID就是一个例子,它不会引导任何地方,但视频会加载
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";
});
我一直试图自己解决这个问题,任何帮助都会非常大。谢谢大家。