Page content showing while loading animation is happening?

March 21, 2023

I have a loading animation. https://repulsiverectangularcomputationallinguistics.elliott23.repl.co/
The content of the page shows while the loading animation is still going. I haven’t had this happen before.
This is the CSS and HTML also some JavaScript.

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

html {
  height: 100%;
  width: 100%;
  background-color: white;
}
.container{
  width: 200px;
  height: 60px;
  margin: auto;
  margin-top: 40%;
  margin-left: 50%;
  transform: translate(-50%, -50%);
}
.ball{
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  left: 15%;
  animation: ball .5s alternate infinite ease;
}
@keyframes ball{
  0%{
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform:scaleX(1.7);
    background-color: #ff3ea5ff;
  }
  40%{
    height: 20px; 
    border-radius: 50%;
    transform: scaleX(1);
    background-color: #edff00ff;
  }
  100%{
    top: 0%;
    background-color: #00a4ccff;
  }
}
.ball:nth-child(2){
  left: 45%;
  animation-delay: .2s;
}
.ball:nth-child(3){
  left: auto;
  right: 15%;
  animation-delay: .3s;
}
.shadow{
  width: 20px;
  height: 4px;
  border-radius: 50%;
  background-color: #ffffff59;
  position: absolute;
  top: 62px;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  animation: shadow .5s alternate infinte ease;
}
@keyframes shadow{
  0%{
    transform: scaleX(1.5);
    background-color: #ff3ea56b;
  }
  40%{
    transform: scaleX(1);
    opacity: .7;
    background-color: #edff0066;
  }
  100%{
    transform: scaleX(0.2);
    opacity: .4;
    background-color: #00a4ccb6;
  }
}
.shadow:nth-child(4){
  left: 45%;
  animation-delay: .2s;
}
.shadow:nth-child(5){
  left: auto;
  right: 15%;
  animation-delay: .3s;
}
.loader-wrapper{
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.loader-wrapper.invis{
  opacity: 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="loader-wrapper">
    <div class="container">
      <div class="ball"></div>
      <div class="ball"></div>
      <div class="ball"></div>
      <div class="shadow"></div>
      <div class="shadow"></div>
      <div class="shadow"></div>
    </div>
  </div>
  <h1>This is the page content that I want to be hidden when the page is loading.</h1>
</body>

</html>

I have tried messing around with z-indices with the loader wrapper, but that hasn’t worked. I am genuinely confused about why this isn’t working. Help is much appreciated. What I want the code to do is hide the <h1> on the page, it isn’t being hidden, if you look at the fullscreen one https://repulsiverectangularcomputationallinguistics.elliott23.repl.co/ it will show the <h1>, I need it to be hidden. But it shows.

>Solution :

You need to add a class or an ID (could be better yet) to identify the content you want to hide.

Then add to the loader (.loader-wrapper) an absolute display to fit the entire space of the page, 100% height and width is not enough.

Then address the content first with 0 opacity for hidden, and then 1 opacity for visible state.

Like this:

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

}, 3000)

html {
  height: 100%;
  width: 100%;
  background-color: white;
}

.container {
  width: 200px;
  height: 60px;
  margin: auto;
  margin-top: 40%;
  margin-left: 50%;
  transform: translate(-50%, -50%);
}

.ball {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  left: 15%;
  animation: ball .5s alternate infinite ease;
}

@keyframes ball {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
    background-color: #ff3ea5ff;
  }
  40% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
    background-color: #edff00ff;
  }
  100% {
    top: 0%;
    background-color: #00a4ccff;
  }
}

.ball:nth-child(2) {
  left: 45%;
  animation-delay: .2s;
}

.ball:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}

.shadow {
  width: 20px;
  height: 4px;
  border-radius: 50%;
  background-color: #ffffff59;
  position: absolute;
  top: 62px;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  animation: shadow .5s alternate infinte ease;
}

@keyframes shadow {
  0% {
    transform: scaleX(1.5);
    background-color: #ff3ea56b;
  }
  40% {
    transform: scaleX(1);
    opacity: .7;
    background-color: #edff0066;
  }
  100% {
    transform: scaleX(0.2);
    opacity: .4;
    background-color: #00a4ccb6;
  }
}

.shadow:nth-child(4) {
  left: 45%;
  animation-delay: .2s;
}

.shadow:nth-child(5) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}

.loader-wrapper {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: absolute;
}

.loader-wrapper.invis {
  opacity: 0;
}

.content {
  opacity: 0;
}

.content.vis {
  opacity: 1;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="script.js"></script>
</head>

<body>
  <div class="loader-wrapper">
    <div class="container">
      <div class="ball"></div>
      <div class="ball"></div>
      <div class="ball"></div>
      <div class="shadow"></div>
      <div class="shadow"></div>
      <div class="shadow"></div>
    </div>
  </div>
  <h1 class="content">This is the page content that I want to be hidden when the page is loading.</h1>
</body>

</html>