Preloader
HTML
<html lang="de">
<body>
<div class="outerWrapper">
<div class="wrapperLoader">
<div class="loader"></div>
</div>
<div class="content">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/EmFfq68ggZ4"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Ro-zdJqTfYg"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
.wrapperLoader {
width: 100vw;
height: 100vh;
max-width: 100%;
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
width: 20vw;
height: 20vw;
border-radius: 50%;
border: 8vw solid lightgrey;
border-top: 8vw solid darkgrey;
animation: circle 2s linear infinite;
}
@keyframes circle {
0% {
transform: rotateZ(0);
}
100% {
transform: rotateZ(360deg);
}
}
.outerWrapper {
width: 100vw;
height: 100vh;
max-width: 100%;
overflow: hidden;
}
JS
let loader = document.querySelector(".wrapperLoader");
let outer = document.querySelector(".outerWrapper");
let allImg = document.querySelectorAll("img");
let allIframe = document.querySelectorAll("iframe");
let zaehler = 0;
let loadEvent = allImg.length + 1 + allIframe.length;
allImg.forEach(checkImg);
allIframe.forEach(checkIframe);
window.addEventListener("load", () => {
zaehler++;
hideLoader();
});
function checkIframe(elem) {
elem.addEventListener("load", () => {
zaehler++;
hideLoader();
});
}
function checkImg(elem) {
if (elem.complete) { zaehler++; hideLoader(); }
else {
elem.addEventListener("load", () => {
zaehler++;
hideLoader();
});
}
}
function hideLoader() {
if (zaehler === loadEvent) {
loader.remove();
outer.classList.remove("outerWrapper");
}
}