Page Loading Can’t Work

Question

Good morning,

I’m trying to make an animated page load for my page but jquery is not able to hide the div that contains the animation

HTML

   <div class="loading" id="background">
   <div class="home" id="homep">
   <p class="home" id="sphere">CONECTANDO O MUNDO!</p>
   </div>
   </div>

JQUERY

  $(window).load(function(){
   setTimeout(function(){ $('.loading').fadeOut() }, 1000);
  });

CSS

#background {
 background: url('http://payload71.cargocollective.com/1/3/111325/3721041/ico_sphere.gif') no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
text-align:center;
}
#sphere{
  color:white;
  font-family:Droid sans;
  font-size:80px;
  position:relitive;
  text-align:center;
  margin-top:250px;
  opacity:1.0;
  z-index:10;
  }

My goal is for him to stay for about 5 seconds and then disappear alone, but it’s not working, someone can help me?

NOTE: It is the first Download page that I try to mount !

Code https://jsfiddle.net/u9L7k74w/

Answer 1

change

 $(window).load(function(){
   setTimeout(function(){ $('.loading').fadeOut() }, 1000);
  });

for

 $(function(){
   setTimeout(function(){ $('.loading').fadeOut() }, 1000);
  });

if it doesn’t work, check if Voce imported the Jquery file

  $(function(){
   setTimeout(function(){ $('.loading').fadeOut() }, 1000);
  });

 #background {
 background: url('http://payload71.cargocollective.com/1/3/111325/3721041/ico_sphere.gif') no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
text-align:center;
}
#sphere{
  color:white;
  font-family:Droid sans;
  font-size:80px;
  position:relitive;
  text-align:center;
  margin-top:250px;
  opacity:1.0;
  z-index:10;
  }

   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <div class="loading" id="background">
   <div class="home" id="homep">
   <p class="home" id="sphere">CONECTANDO O MUNDO!</p>
   </div>
   </div>