Search code examples
javascriptcsscss-animations

Loading icon not disappearing after a 2.5 seconds

I have this website and I want the loading icon to look like the Disney+ one. https://mandalorian.elliott23.repl.co/. This is the website, only the loading icon is showing and the actual page is not showing up. This is the JavaScript and relevant CSS and HTML.

.loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  display:flex;
  justify-content: center;
  align-items: center;

  opacity: 1;
  transition: opacity 0.5s;
}
.loader-wrapper.invis {
  opacity: 0;
}

function $(qry){return document.querySelector(qry);}
setTimeout(() => {
  $(".loader-wrapper").classList.add("invis")
}, 2500)

<div class="loader-wrapper">
  <img src="+load.svg" width="120px">
</div>

I tried using things from past websites (https://cube.elliott23.repl.co) and it didn't work. It has worked with other websites. I don't know if it is because I am using an image or not. Help would be very appreciated.

Solution

  • I tried putting your function in the console and it worked. It seems like the issue is that your function is not being run, therefore not actually adding the invis class.