I've been searching everywhere and can't find a good tutorial on how to smoothly transition pages when clicking a link on my website. I want the page to fade out on click, display a preloader, then fade in the new page once the preloader finishes. Take a look at for an example.
Any assistance would be greatly appreciated.
Preloader
<div id="preloader">
<div id="status"> </div>
</div>
Script
$(window).load(function() { // ensures entire site is loaded
$("#status").fadeOut(); // fades out loading animation
$("#preloader").delay(350).fadeOut("slow"); // fades out white DIV covering website
})
CSS
#preloader {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change color if needed */
z-index:99; /* keeps it on top */
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers loading animation horizontally */
top:50%; /* centers loading animation vertically */
background-image:url(../img/status.gif); /* path to loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* centers it */
}