Why is my loading animation appearing only at the top with the full website still visable?

Question

Website works. But the loading animation appears at the top. Everything works fine. Except this. I have no clue why its happening. I thought it was because the loading screen was inside the body scope or something. I tried rearranging everything with the container of the loading screen in the middle. but that made the website wonky.

  <div class="container">
    <div class="bowl">
      <div class="glow"></div>
      <div class="glow glow-a"></div>
      <div class="glow glow-b"></div>

    </div>
  </div>

<div class="divclass">
    <div class="item">
    <h2  class="subitem"> test heading</h2>
    </div>

<script>
  $(window).on("load",function(){
    $(".container").fadeOut("slow");
  });

</script>

CSS

.container{
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bowl{
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #00F260;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #0575E6 -80%, #00F260);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #0575E6 -80%, #00F260); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position: relative;
  z-index: 300;
  overflow: hidden;
}
.glow{
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-left: -50px;
  background: #000;
  margin-top: -150px;
  border-radius: 90px;
  position: absolute;
  z-index: 100;
  transform-origin: 50% 48%; 
  animation: glow 5s infinite linear;
  opacity: .4;
}
.glow-a{
  background: #000;
  margin-top: -148px;
  margin-left: -58px;
  animation: glow 3s infinite linear;
  opacity:  1;
  z-index: 200;
}
.glow-b{
  opacity: .5;
  background: rgba(0, 0, 0, 0.7);
  margin-top: -148px;
  animation: glow 7s infinite linear;
}
@keyframes glow {
  from{transform:rotate(0deg);  }
  from{transform:rotate(360deg);  }
} 

Answer 1

Use position: fixed , with high z-index, and an opaque background on the .container class. Also give it more height. 100vh will cover the whole window.

 $(window).on("load",function(){ $(".container").fadeOut("slow"); });

 .container{ width: 100%; height: 100vh; background: white; z-index: 10; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; }.bowl{ display: inline-block; width: 100px; height: 100px; border-radius: 50%; border: 3px solid #fff; background: #00F260; /* fallback for old browsers */ background: -webkit-linear-gradient(to top, #0575E6 -80%, #00F260); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, #0575E6 -80%, #00F260); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ position: relative; z-index: 300; overflow: hidden; }.glow{ display: inline-block; width: 200px; height: 200px; margin-left: -50px; background: #000; margin-top: -150px; border-radius: 90px; position: absolute; z-index: 100; transform-origin: 50% 48%; animation: glow 5s infinite linear; opacity: .4; }.glow-a{ background: #000; margin-top: -148px; margin-left: -58px; animation: glow 3s infinite linear; opacity: 1; z-index: 200; }.glow-b{ opacity: .5; background: rgba(0, 0, 0, 0.7); margin-top: -148px; animation: glow 7s infinite linear; } @keyframes glow { from{transform:rotate(0deg); } from{transform:rotate(360deg); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="bowl"> <div class="glow"></div> <div class="glow glow-a"></div> <div class="glow glow-b"></div> </div> </div> <div class="divclass"> <div class="item"> <h2 class="subitem"> test heading</h2> </div>