Add Page Loading animation effect with beforeunload Event

Add Page Loading animation effect with beforeunload Event
lazy load

Many website is little slow and load the page slowly when you click on any link or try to enter into post or article. So it's not looking good, even user may feel disturbing by seeing that. So you can simply makeup this problem by adding a loading animation which will make your blog professional. As a result your visitors won't understand that your blog is slower. This widget work like magic and the code build with pure CSS. When you click on any link then it will become dark then the link will open. For this reason visitors will see your page loading time as animation. This animation called beforeunload Event.
beforeunload is an event that is triggered when a page starts to move because a user clicks on a particular link (or just reload the page by clicking the Reload on the browser) that triggers them to come out from that page.

Hope you would like this trick to overcome from your page delay loading time.

Step 1 Log in to your Blogger Account and Click on Template  ->

Step 2 Now click on Edit HTML-> Unfold code  

Step 3 Now find ]]></b:skin> by Pressing  Ctrl + F

Step 4 And Paste the below code above ]]></b:skin> 

#BloggerSpicePL {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background-color:black;
  color:white;
  padding:1em 1.2em;
  display:none;
}

Step 5 Now Find this code </body> by pressing  Ctrl + F

Step 6 Copy the code from below and Paste it  Before/above </body>

<script type='text/javascript'>
//<![CDATA[
// Trick by www.bloggerspice.com
$(document.body).append('<div id="BloggerSpicePL">Loading...</div>');
// When stimulated to move active pages / exit to other pages...
$(window).on("beforeunload", function() {
    // ... trick by www.bloggerspice.com `.fadeIn()`
    $('#BloggerSpicePL').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>


Step 7 Now simply hit the save button

If you face any problem then feel free to contact me. I will help you to install this animation into your blog. Happy Blogging. 
Go Up