Page Pre loader not removing-CodePudding

Can someone tell me why the pre loader div doesn't disappear after the page is loaded and specified added time. It used to work, now it doesn't on a new site... I think I may have missed something when using it on the new site.

it just shows the div and stays on that screen forever.

$('body').append('<div id="loading-container"><div id="loading-inner"><p id="percent">100</p><div id="bar"><div id="bar-percent"></div></div></div></div>');

$(window).on('load', function(){
  setTimeout(removeLoader, 2750); //wait for page load PLUS x.
});

function removeLoader(){
    //fadeUp.play();
    $( "#loading-container" ).fadeOut(250, function() {
      // fadeOut complete. Remove the loading div
      $( "#loading-container" ).remove(); //makes page more lightweight 
    });  
}

/* LOADER */
#loading-container {
  position:fixed;
  top:0;
  left:0;
  display: flex;
  justify-content: flex-end;
  width:100%;
  height:100vh;
  background-color: #131313;
  z-index: 20;
}
#loading-inner {
  display: flex;
  align-self: center;
  flex-direction: row;
}
#percent {
  color: white;
  font-size: 30px;
  margin-right: 30px;
  font-family: canela
}
#bar {
  width: 200px;
  background-color: #424242;
  height: 1px;
  align-self: center;
}
#bar-percent {
  height: 1px;
  width: 1%;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

It works well for me.

If it isn't working in your site then see the console for any error, because it may caused by any other code that stops executing the code before loader div disappear.

CodePudding user response：

Try with below code. i jsut save html string with jquery object in loader variable. and now its not depend on id.

var loader = $('<div id="loading-container"><div id="loading-inner"><p id="percent">100</p><div id="bar"><div id="bar-percent"></div></div></div></div>')

$('body').append(loader);

$(window).on('load', function(){
  setTimeout(removeLoader, 2750); //wait for page load PLUS x.
});

function removeLoader(){
    //fadeUp.play();
    loader.fadeOut(250, function() {
      // fadeOut complete. Remove the loading div
      loader.remove(); //makes page more lightweight 
    });  
}