Add Animated Page Loading Effect for Blogger

Page loading with animated effects is pretty cool for blogger user, it makes your blog more responsive and attractive in front of upcomin...

Page loading with animated effects is pretty cool for blogger user, it makes your blog more responsive and attractive in front of upcoming visitors. Today there are lots of tools and inventories from which you can make everything like previously, I have discussed with you that how to add or create Custom Scrollbar with Hover Effects, List view to Grid View and Magazine Style this web designing series is very helpful for you if you want to customize your blog template, just like today I will share with you new stylish page loading effect for blogger blog. Let's start this interesting tutorial by seeing the demo below.

DEMO

Open your blog account.

Click on Template>> Edit HTML>> Press CTRL+F.

Please make sure that you already have this script below, if you don’t have so add it above </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

Search the below code.

</body>

Now add the below code just above </body> and Click on Save Template.

<style>
#nbl-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/AVvXsEjyhvyz6j7G7K91ue-vhDz_-JOdWipjHH0meDMQmK43YrG0d2d5GrofEbaZ73TZLN-DP5m4VACLcI43dCkX45dFBL29498QGX4gQUWamRYDD9U-LP98ux8Yx_xueOYsfGxUPyZg9xA6eUCt/s1600/loader.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
opacity: 0.5;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="nbl-page-loader">Loading...</div>'); $(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()` $('#nbl-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

You can also change the animated image by changing the above URL which is present in RED color with your image URL but remember in this script you have to use flash moving image, don’t add any simple JPG or PNG image, use GIF extension images.

I hope this small tutorial will help you to make your blog more awesome, this animated page loading effect is totally professional if you know and see the templates from most popular theme site Theme Forest so you would know that they also used this script for adding massive loading effect in blogger template.