Add Page Loading animation effect with beforeunload Event
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 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.
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.
3 comments
dont forget to visit shayrikiduniya@com