Blogger Tutorials

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 :


.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=”//”></script>
<script type=”text/javascript”>
$(window).load(function() {

Step 4.
 Now Save the Template. and everything is done.

Subscribe us on YouTube For More :

Leave a Reply

Your email address will not be published. Required fields are marked *