To add this effect to your blog do the following things.
Adding the HTML and Script
Add the below given code just above </body>.<style>
#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho6BN2tAPMG7H4L41Ga3c6_AZ5W1qCBawSFyondzQYKwF4Jq1U0Gid2DxmVAJSHs-O14WF6DdsXJe5CStZ5kk8uiF074YXwVza1R81djTb2t9tefsR7L1ZYK53ykJukGhGKErtVb_Mee0/s200/load6.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
After adding this code, save the template.
