How To Add Loading Animation in Blogger Site

Adding a Loading Animation/CSS can improve your user interaction with your blog. user dont feel they are waiting for the page load.

Follow My Steps to Set-up a Loading Animation

Step 1. 

search for </b:skin>

Copy the code & paste before ]]></b:skin>

Replace ‘image url’ with the link of the gif image.

Infinite loop gif : https://1.bp.blogspot.com/-lay_vNRClng/X6K6eQGX1LI/AAAAAAAAFMQ/cOETdJcoo7IPre4EWReZlynK8EPWSFLJACLcBGAsYHQ/s320/Infinity-1s-204px%2B%25281%2529.gif

—————————————————

.loader {

position: fixed;

left: 0px;

top: 0px;

width: 100%;

height: 100%;

z-index: 9999;

background: url(‘Image URL’) 50% 50% no-repeat rgb(249,249,249);

}

/* Created by Hive-Store */

—————————————————

Step 2. 

search <body> or <body

copy & paste after body tag start

—————————————————

<div class=”loader”></div>

—————————————————

Step 3. 

search for <head>

copy & paste under head tag

—————————————————

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>

<script type=”text/javascript”>

$(window).load(function() {

$(“.loader”).fadeOut(“slow”);

})

</script>

—————————————————

Must Read

LEAVE A REPLY

Please enter your comment!
Please enter your name here