How can I ensure that the preloader covers the entire height of the page and no loading elements are visible?
Whenever I run this code, the content inside is visible when I scroll down. How can I make sure that the preloader background covers the entire page?
HTML:
<div class="pre-outer">
<div class="preloader">
</div>
</div>
<section class="home-section-background padding-bottom-0">
</section>
CSS:
/* Loader Styles */
.pre-outer
{
background: rgba(1,1,1,1);
width: 100%;
z-index: 999;
height: 100%!important;
}
.preloader {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow-y: hidden;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
background: rgba(1,1,1,1);
width: 100%;
position: absolute;
z-index: 999;
height: 100%!important;
-webkit-animation: glow 8s both;
animation: glow 8s both;
}
Javascript code for loader:
<script>
$(window).load(function () {
$('.pre-outer').delay(8000).fadeOut('slow');//loader div
});
</script>