I've tried using the below code to have a div display as a loading screen. But it dissapears as soon as the page loads.. I want it to stay for 5 seconds while things in the background load, and then dissapear. How do I do this? I tried adding setTimeout but it didn't do anything
$(window).on('load', function () {
setTimeout(document.getElementById("loading").style.display = "none", 5000)
});
#loading {
display: block;
opacity: 1;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: $black;
}
.loading_logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="loading">
<img class="loading_logo" src="<?php echo get_template_directory_uri();?>/lib/images/header-logo.svg">
</div>