LOADING SCREEN: ANIMATED LOADER SCREEN

How to make a loading screen in our blog - This is tutorial for blogger about how to make nice loading screen in our site. The scripts is a quite small, but remember do not use big size images. Consider to make our blog keep fast!

HOW TO MAKE A LOADING SCREEN IN OUR BLOG

CSS: LOADING SCREEN

Put this before ]]></b:skin> or </style> :

#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#FFFFFF url('//ANIMATED.GIF') no-repeat 50% 50%;
padding:1em 1.2em;
display:none;
}

You can choose one of the animated picture / image that available just for you. Change the //ANIMATED.GIF with the animated image's URI, the transparent is better.

JAVASCRIPT: LOADING SCREEN

Then, paste this code before tag </body> :

<script type="text/javascript">
//<![CDATA[
$(document.body).append('<div id="page-loader">
</div>
');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

jQUERY: LOADING SCREEN

You need /jquery.min.js. Just use one version, and make sure do not have duplicate jQuery code jQuery in your template.
Example:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>

Read too: How to make Inline jQuery?