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