JQuery Page Loading Popup

In a website whenever a user clicks a link, that user has to wait for seconds to see the new loaded page. In today’s tutorial we will show an interesting popup after the click event occurs and after few seconds the page will load.

This is just an interactive way to load a page; it will take the same time to load as it was before.

The basic HTML Code:
[html]
<div style="display: none;" id="overlay"></div>
<div style="display: none;" id="popup">
<img src="loading.gif" />
</div>

<a href="www.webstutorial.com/jquery-page-loading-popup/jquery" id="link">Click Here</a>
[/html]

The JQuery code:

[js]
<script type="text/javascript">
$(document).ready(function(){
jQuery("#link").click(function(event) {
event.preventDefault(); //to stop the default loading
var a_href = $('#link').attr('href'); // getting the a href link
jQuery("#overlay").css('display','block'); // displaying the overlay
jQuery("#popup").css('display','block'); // displaying the popup
jQuery("#popup").fadeIn(500); // Displaying popup with fade in animation
setTimeout(function() {
jQuery("#popup").fadeIn(4000); //function to redirect the page after few seconds
window.location.replace("http://"+a_href); // the link
}, 3000);
});
});
</script>
[/js]


Try the Demo, and suggestions are always open.