Page Pre loader not removing

Question

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>

Works fine in your snippet, except for `fadeUp` not being defined. Check [this](https://stackoverflow.com/questions/2810825/javascript-event-window-onload-not-triggered) for your actual code. — Lain, May 12 '22 at 05:04
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. — Raju Adhikary, May 12 '22 at 05:35

score 0 · Accepted Answer · answered May 12 '22 at 05:46

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 
    });  
}

Page Pre loader not removing

1 Answers1