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;
  padding:1em 1.2em;

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'>
// Trick by
$(document.body).append('<div id="BloggerSpicePL">Loading...</div>');
// When stimulated to move active pages / exit to other pages...
$(window).on("beforeunload", function() {
    // ... trick by `.fadeIn()`

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. 
Add Page Loading animation effect with beforeunload Event
4 Stars stars - "Add Page Loading animation effect with beforeunload Event" Many website is little slow and load the page slowly when you click on any link or try to ente...

Post a Comment

nice, trick regards from iliyas shaikh (shayrikiduniya)

dont forget to visit shayrikiduniya@com

thanks iliyas..being with us for more exciting release.

Is wonderful, I hope that there will be no problem if for some reason a script will not work

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *