After spending several hours on it, I'm still struggling to understand why my code isn't working.
The goal is to create an animation of a spinning circle during the page load. The code I have so far accomplishes this, but the issue is that it never stops, preventing the rest of the page from loading.
Javascript:
// Waiting for window load
$(window).load(function() {
// Fading out the loader animation
$(".se-pre-con").fadeOut("slow");;
});
HTML: Just a simple div with a specific class
<div class="se-pre-con"></div>
CSS
.no-js #loader {
display: none;
}
.js #loader {
display: block;
position: absolute;
left: 100px;
top: 0;
}
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}
NOTE: I followed this tutorial:
OTHER NOTE: This is specifically for an ASP.NET MVC application