I've encountered an issue with my preloader where it's loading in front of the <body> element but not in front of the site's <navbar> or the {% block content %}. The CSS snippet to increase the z-index of the preloader is as follows: #preloader{z-index:999;}
- Django 2.2.7
- Bootstrap 4.4.1
- JQuery 3.4.1
$(window).on('load', function() {
$('#preloader').addClass('loaded');
setTimeout(function(){
$('#preloader').addClass("notta");
}, 2000);
});#preloader:before {
content: '';
z-index: 999;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,1);
}
#preloader.loaded {
opacity: 0;
transition: .3s ease-in 1s;
}
#preloader.notta {
display: none;
}<header>
<div class="flex-center" id="preloader">
<div class="preloader-wrapper active">
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</header>If I move the preloader to the bottom of the <body>, it loads on top of the {% block content %} but still remains underneath the navbar. Could this be related to the order of loading elements?
How can I ensure that the preloader displays above all other elements on the site?