Page Loading Can not Work

Navigation
1

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 5 seconds and then disappear by himself, but it's not working, can anyone help me?

NOTE: This is the first page loader I try to mount!

Code link

    
asked by anonymous 26.10.2017 / 14:56

1 answer

0

switch 

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

by 

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

If it does not work, make sure you 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><divclass="loading" id="background">
   <div class="home" id="homep">
   <p class="home" id="sphere">CONECTANDO O MUNDO!</p>
   </div>
   </div>
    
26.10.2017 / 15:13
Matrices and Pointers How to read 4 numbers at a time, and should such numbers be separated by space only?