Preloader in 15min - Help

Support
, ,
1

Hey there!
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 tag 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):

I think this should be possible, right?

Here is the Codepen with my current site: Here is the codepen.

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"
});

My Netlify instance name is 15min (15min.netlify.com)

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

Anyways, thanks in advance

TRG

2

Hi, @TRGamer-tech. I’m hoping someone is able to make suggestions about how to accomplish this with your site code but our support team generally won’t be able to answer questions like these.

Our support team isn’t able to dive in to site specific code questions like this as our bandwidth is finite and Netlify specific questions are many. We are only able to answer questions which are specific to Netlify because of this.

As this is a general question about web development and javascript, it is isn’t covered by our scope of support (which doesn’t cover custom code):

Again, though, there are many developers which use this community site and it is my hope that someone else may have suggestions about how to approach doing this. Similarly, if you do solve this and want to follow-up with your solution here, I’m sure it will be a great benefit to others in the future.

3

Hey @luke!

I am sure thankfull that you have said me that. I will search for an answer on other sites and will post the answer (if I find it) right here.

Anyways thank you for everything

TRG