UrduBloggingHub | Informatvie Blog About SEO & Blogging: How to Create a Unique Loading Effect in Blogger | Top 16 Eye Catching Effects

"Loading" effect show a process bar when page loading like picture above . This effect is very useful for website .If loading time of your website is so long ,readers may think your website was down and find another website ,but in case of adding a loading bar ,readers may think the page is being processed and keep waiting a bit till full page loaded .

There are many way to create loading effect ,in this post ,I want to introduce the easiest way,here are some ideas and inspiration of loading effects that you can apply on your web design.Lets try how to install these effects to your blogger blog.

Instructions to follow:

1. Go to Blogger Dashboard→Your Blog
2. Template→Edit HTML
3. Now Search for </head> By Pressing (Ctrl+F)
4. Copy the code below and paste it just above the code </head> 

Step 1:

JQuery Code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Alert Message : The Below Lines Needs Your Attention.

If jQuery is already in your template, do not copy anymore, because if jQuery is more than one would slow loading blog.

Step 2:

• Now,again search this peace of code in your blogger template 
• ]]></b: skin> or </style> with (Ctrl + F).

• Copy the code below and paste it just above ]]></b:skin> or </style> .

CSS Code:

#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#FFFFFF url('URL Here') no-repeat 50% 50%;

padding:1em 1.2em;
display:none;
}

Step 3:

1. Find the code </body> with Ctrl + F.  
2. Copy the code below and paste code right above the code </body> .

JavaScript Code:

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

• Please select the menu loading of your choice and paste the URL in BLUE Writing.

http://3.bp.blogspot.com/-99_s0XfLTt0/UQaikh3bSMI/AAAAAAAAFOU/BuKqG0mh0eY/s1600/loading4.gif

http://1.bp.blogspot.com/-W9bm3Oc6WzA/UQaik9ql4AI/AAAAAAAAFOg/3fyDf9Agbso/s1600/loading5.gif

http://1.bp.blogspot.com/-udgAVO3FySQ/UQailMH35aI/AAAAAAAAFOo/JD6vDePg9OU/s1600/loading6.gif

http://2.bp.blogspot.com/-yz54Aj8Fp1s/UQailmVa8BI/AAAAAAAAFPA/LT0KOGY-_lk/s1600/loading8.gif

http://3.bp.blogspot.com/-eeiu8xL2Qls/UQaimEebl4I/AAAAAAAAFO8/hSK_kq7C8Po/s1600/loading9.gif

http://3.bp.blogspot.com/-bWMOJ7ywzjg/UQaij1cSLiI/AAAAAAAAFOM/Nrdgh1W6hys/s1600/loading10.gif

https://lh4.googleusercontent.com/-1nnz_q-zdlE/U7nQPsC7zvI/AAAAAAAAEDU/a3A-LG1mM0I/s128-no/Loading1.gif

http://3.bp.blogspot.com/-Y2S2txttvPw/U7nQPi0h5MI/AAAAAAAAEDU/rsMYnz5-yn0/s128-no/Loading2.gif

http://1.bp.blogspot.com/-tjFFryWgIcs/U7nQQ0x7JHI/AAAAAAAAEDU/v2BqyuIvCc8/s128-no/Loading3.gif

http://2.bp.blogspot.com/-kXvhQBHoB0s/U7nQRhwcIxI/AAAAAAAAEDU/WDhTfSJOii8/s128-no/Loading4.gif

http://2.bp.blogspot.com/-JN0Uo9ud0SY/U7nQSv_-HfI/AAAAAAAAEDU/NfHcUkP27QY/w124-h128-no/Loading5.gif

http://1.bp.blogspot.com/-sGFHLSRy2OI/U7nQTn34h8I/AAAAAAAAEDU/0PUXPSEACPc/s128-no/Loading6.gif

http://2.bp.blogspot.com/-bixcnTkh4q4/U7nQUNmm3_I/AAAAAAAAEDU/YE9s5MKfa60/s128-no/Loading7.gif

http://1.bp.blogspot.com/-sbG2UKoWYpc/U7nQUtY6YOI/AAAAAAAAEDU/Oc22arnyymc/w128-h54-no/Loading8.gif

http://4.bp.blogspot.com/-H8yWVVQ78Wk/U7nQVZTbQqI/AAAAAAAAEDU/a-aWtzRZlls/s128-no/Loading9.gif

http://2.bp.blogspot.com/-qqEpMJ9PeoI/U7nQO-rfprI/AAAAAAAAEDU/YvXcmUbolGc/w128-h40-no/Loading10.gif

Success Message : You have successfully add this plugin to your blogger blog.

Need Help ?

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below.

Peace and blessings buddies. :)