Preloader in Website with

tag content disappearing and appearing again

I am back with another Problem for you guys to solve.

I want to make a preloader for my Website as a GIF. Thats not the problem tho.

I want the content of the `<main>` tag (not the main tag itself!) to disappear while the preloader is displayed. as soon as the preloader is finished, it disappears and the content should be displayed again.

Here is a self made Video how I want it to look (sorry if its poorly made, im still learning):

[The Video how I want it to look like](https://vimeo.com/381767683)

I think this should be possible, right?

Here is the Codepen with my current site: [Here is the codepen.](https://codepen.io/TRGYT/pen/PowKzbK)

This is my HTML for the preloader:

“`
<div class=”loader”>
<img src=”img/loading.gif” alt=”Loading…” />
</div>
“`

This is my CSS for the preloader:

“`
.loader {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
}

.loader > img {
width: 100px;
}

.loader.hidden {
animation: fadeOut 1s;
animation-fill-mode: forwards;
}

@keyframes fadeOut {
100% {
opacity: 0;
visibility: hidden;
}
}
“`

This is my JS for the preloader:

“`
window.addEventListener(“load”, function() {
const loader = document.querySelector(“.loader”);
loader.className += ” hidden”; // class “loader hidden”
});
“`

I did search before posting, but sadly I couldnt find anything related to that…

Greetings

TRG

Also in #HTML _↴