I'm working on creating a preloader by displaying an overlay until all the content on the page is loaded. However, despite checking my code multiple times, I can't seem to figure out why it's not working.
If anyone could provide some assistance, that would be highly appreciated 😊
var overlay = document.getElementById("overlay");
window.addEventListener('load', function() {
overlay.style.display = 'none';
});
<div id="overlay">
<div id="preloadSpinner">
<img class="spin" src="image">
</div>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/67_DXhS3_Hc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
#overlay {
height: 100%;
Width: 100%;
background: rgba(0, 0, 0, 1);
position: fixed;
left: 0;
top: 0;
}
.spin {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin {
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }
}
Check out the jsfiddle here: https://jsfiddle.net/gxL7erwy/28/