I am facing an issue with the preloader on my webpage where the animation is not displaying as expected. The animation should appear on top of a dark black background before the page fully loads, but it seems to be missing.
The CSS for the animation works fine when placed in #windowloader, however, I need it to be on top of a solid background to hide unloaded content. I tried putting it into an :after pseudo-class to load it on top of the #windowloader div, but unfortunately, this solution is not working.
Is there something wrong with my CSS or any other reason causing this issue?
You can view the Codepen showcasing the animation that should be visible here: http://codepen.io/devilishalchemist/pen/emOVYQ
Below is the HTML code:
<div id="windowloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Relevant CSS snippet from my page:
// PAGE LOADER
.nonscroll {
overflow: hidden;
}
#windowloader {
overflow: auto;
top:0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 999998;
display: table;
background: $black;
}
I have also attempted:
#windowloader:after { }
Javascript code used:
///////////////////////////////////////////////////////////////////////////
// Window Loader
///////////////////////////////////////////////////////////////////////////
$("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});
$("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
$("body").removeClass('nonscroll');
$("#windowloader").remove();
$("#portfoliogrid").isotope('layout');
$("#isotopeMembers").isotope('layout');
$(".isotopeBlog").isotope('layout');
});