How To Create A Unique Loading Effect In Blogger or Website | Top 28 Eye Catching Effects

In my old tutorials I wrote on creating a blog, changing the template but today I am going to tell about a serious issue of page loadi...

In my old tutorials I wrote on creating a blog, changing the template but today I am going to tell about a serious issue of page loading. It is very useful for the reader as well as it increases the beauty of your blog or website. It will not affect the SEO of your blog or website.

"Loading" effect shows a process bar when page loading like the picture above. This effect is very useful for the 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 load.

There are many ways to create a 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. Let's try how to install these effects to your blogger blog.

Follow My Instructions:

Step:1 Go to Blogger Dashboard→Your Blog

Step:2 Template→Edit HTML

Step:3 Now Search for </head> By Pressing (Ctrl+F)

Step:4 Copy the code below and paste it just above the tag </head> 

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

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

Step:5 Now,again search this peace of code in your blogger template 

[]]></b: skin>]

or 

[</style>]

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

[#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:6 

• Find the tag </body> with Ctrl + F.  
• Copy the below code and paste code right above/before the tag </body>

[<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>]

Step:7  Please select the menu loading of your choice and paste the URL in Red Writing in the code of step 2.

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZ3TgRSiE4yZk9H9lYtuvKPlrOSPUV4oPDzIjFXmLdipnPIzSdGkBAiQucgErDJhXJvfZwV6bT-qr82s8mVbLeSIzhyyNNX2Y_2VYVgJOzv1NgUXtFF0Aq9ATeOcfRYWa-OLVQcVksY6N/s1600/loading4.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-wBB1HLUd0n4xbn5NKuHRaEhF0cx1gKH5f3eWd7q-1qZA-CRXQlrtIDQeDXlXxW8S7Qj2YNaG7oPy6AkgX3bsgOM5pYOagmK3ua51RcEMk7P002YGEvMzSIhyphenhyphenV_NB5vkUJ2cBH0TiMT-U/s1600/loading5.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidE68Xjo5axpYhNnxLwZFy6xW-qXoZfHxY2iOhhZmlwja5b40LUVjPfJEwlHrVkcWW-Ra_TRH_aoajuS-qeD-qsN3xdcd91zv1cABV6FfIuO8JxQOSBY_oArQ2DZZh4Zn2jCFU9HVjvOXe/s1600/loading6.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpcHjS031cjGeXLxNeaKxucOWetnk3GhQbjekjIDe4z5s89SjSsbuyS1soIeLYIFvcdIlMhabsRiqVTkMUuHFRqu_B-XvWdNhJA5ciQlvryde2Msp_dwNOdgRxV9QcjyFM7FwPVwoqFII7/s1600/loading8.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSskqUsLth5R3dTJM_br4IlmC9V3A2yojHFazplwG9Nd4K79VHudg8PcMunzwbTblwJeiCaa7HAERyoPgtXCyczIzIUy2gQGzqnqCX6MWf6CRdNQmRXSOzNZZlWqH4rDiwtnvEUSVIosjg/s1600/loading9.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9F3O6OZdPB7QYJfJBSnfAI0UmBgS21JvKv3lbnIKUzZ3ynatROBXKi-AKE5aJo7iOhrxSL5IAKvr7QBfoeE5k0Jemc7aDM0oyoGZgeayrdJzJqvn9pwUN58TtmTmE4d1H6cfQB-pbcqo/s1600/loading10.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHt2SwtZZIBDIKDVI7fATDvmU_X3zbH_coUvbv24bDMXnbgFMZASW2ezRoyIWgr072KdTv5ZxuZWfZNKXwC2vRLRY2cfyhVQTPsQl41agIvDCsJjz3ANv9aFyKlAefWFOLmBa6QUvCzSc/s128-no/Loading1.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlTDlf8M9aBdrZ6LmPNpzqEy6zPCdMfIIIhTFHMdzLTdkHC86bpZZtm1KdRHDInBgvw0MITXVmpVnOaS8aSx0yBQZJ26W9YbcMEn3I4cWwAZXmncITjUf61mX9LG2VdW1GirDXT4y2RBU/s128-no/Loading2.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKYu2jkEpv3C71WFVc0oqhovevtRN7aw_qHYFXOMTp9CdGDWLKMYfeLoIyTBGHT_F-YLL5NHWnUrLt-Jf5qq8stBET0R6aOwjZJUe27eIao7Wm99LzGKhmPg8IuNSS8ytM7_MqQdwxYZM/s128-no/Loading3.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZeY_Zk6NVzRPY5vDzIuGnMv-6-gXZEnuhQfMGRqh_qRIHQFz3t_cc4lpy9hwPfC_uxHg-601B84IG1vDuZVWzZTIBNbkQFEgIiQz-yPBSd9neT7iwyLhr1Uol0aBIK7JvKWK_vw96An8/s128-no/Loading4.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiln3ckZXsF-FpFA28n4EQG9RZ6C2Ml0K-OFSxI9sRgUph7V26SMAOZcReVSfXuUI1h-erkenL8_yTDTgcGDUKfFCvnwkZLKg-FZkiP2EOwovEx9KdQCubCeUenxCD6vWPWbiX6aBM-evY/w124-h128-no/Loading5.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmloGPqv9gg5_5suWtK9BjYGTahRRa70Gb7IBpmjAPZ7Io9Zq__7CF59_ZhnTnDQBApcrkq9FQDwEED9m9AjLuc0K0sZfYDvSQcUElZXc4LgMQICkkSfCBQnPgWlovEWMCJctpW900YuI/s128-no/Loading6.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY7c2joas89YyUHDy1h9PCDPQRe1eIAf0KKZkmuYaCx-5hBsfZLZyQV_q1HunXfeCLvoPVxSoIkGTemuj9GPWvzzlIkb7K2ax6HYwDKJDLHWBhAvpR6bTy1186umC6l_O2aI7j8Iwbrdo/s128-no/Loading7.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuEc6EuhzJU-bdJZotB5m6sLyv-eUM9J39iSHsrK7Obg3dqZSE-Kn6HnGvwvHqmHFE0gyXmzmsyX8g6oqzkr6mqsnqnqpPhaWZ1oVPgeuuuppKd45_pW9vZW7EzkCTkS4Z55T3pWJcGuI/w128-h54-no/Loading8.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5lqLtGqQNSySJ4mfUeqG48y05t8oB1kqz1s-k1Z9hw_x8NOZ-q2zXR_kHqG3aPG1_ej5b0D-0XKxnc_4yZCjHr4bNGZyxcE_vAYypMZRHkjEGhZUciVBUUjtXSJP7w6ZS1UmLr_Cux-I/s128-no/Loading9.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdMHwUWLe9XpOQVwhFuLdE3EmUlEpkuijvGNClS-nMLt0OIXdVorEVEQQoRdspZZzXRKZflzwzFaZkq__tImgSSeKnTZdoGyoVbOYm-xBdVON9tVQd677IxDjsUxzgiDXP_J946tNYYMg/w128-h40-no/Loading10.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjogBgADoqprEK1Q9-veCvBT6weNZz1DDK9A9FInnEBR8p6Lg-mgwW2p6W-6dXPHmlDFyJ_tu0bybEAm-dwnImra9RpuCBc-XK9D8eGLXcwLN_ZBH0SONkWfrzUpTC7qtB9q4oxh5fqEXge/s200/tumblr_mlj1mwdjWP1r9nvifo1_1280.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnt18qsr10mBdu-2-n8i8VC7F0Ddp6rtHjqw_0XvBCY9JU-nuz6ZTFQoGdLNBgfQlakOxr4NPgXLfJVW4KhyautuX863f-zrtQDxC4xwOSNxLHlWDBb_kXZZ4fK6z7KWs3NR1y8HDUfXYk/s200/Add+animated+GIF+images+to+blogger.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFScspB6ex6u2f3jE5FmR3hPHUIJnvsvJku-MhPDOE-_ZCOG__ZN-b6vg4lsS33LQIWlQRQr0W-9sjecdypIoj03T02S2CdPnZjerN8ATeuIkAuXne6y8KuKEkhciUR8-0p2r2Jnw5eYo7/s1600/ajax-loader.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3U9GxnTFjEBRcI-L-uU3aVDLPJ_nGzXC0F2orWtMpnf2zUKyGbb-TyPFQLrNQxiTcQNRljbk4IfjZFMqEJdZG3VN9UyzX74P00jfSl2wgC7Zn71A_o2Z4jr2LpI2B_vwB5X1G9tkYbMr0/s200/loader+%25281%2529.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8dqjfD_U2-hLkDYRToU5RgG7rvmgBKCVZ2Y1o7PZq_dMc_BJf7ZwP-cbgXnEIQAgRcIpPLyAV8e5v8FQ2uNJTjoeOE6XizfdigxeBsb6eBy21Z0KgII7IbVmjQusyoWFzYBeF9ke1I4va/s200/loader.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJQR9_c8OgQ-uxqj-72fVxSVovbcVCtcIgMNrL-AA5VgSPHUkza6QjycIChldfYZTfIi_PuuibwozscK3hM-36De0yhs58UgTB7IXyfOqTpRDmBUoKtEioKBUpBnBUtLWviZ5p7eu5ASgZ/s200/loading1-1.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_YukYs56VA2mG2q6DuDwOpnDF3O8WbqCCMs9A5enYAfhO_aMmNh5HGjxCfbZLZ3gGclkKft8T8HQcsxRHcuGqgS2CAFu3XsCg9suRw6tz9lF32mi5YKLJGz-rDVbV0_SKyNVmBgD9LDDq/s200/loading1.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-oiubelDTaE2Ls9zt2VNMA8-XxxsGIBgs_0TQJLuy8VyIEUkQPJ6hkhUXP-g1vvhKV-094qK6drEvdDkrVgqrgFUCT_bRLMUWZWRLIUuO9i1vQUfteb507iw-rVGptnEQ8GSZdRH2Fada/s200/loading+%25281%2529.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd7aotee45XF-_0Bze0arJR94js7efwY6DA1bY2FLPFCwMiLJkrh3gVl2mdQ6dUcWZzOGSJ7Cy2vXw2B7VNPUmxU-4nGOoXAF4dyKuIiA-iwke9gQoy1nnHSIgaSJKhReD55ldBvnqRCW2/s1600/loading+%25282%2529.gif]

 [https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1gq52YkQetx411rSHyL6BAqLJxeE7tWF1n87ncvRc8gLuQFOyPwtC-LtF8xRUa-gYPfamLAGJ5jLgGu1zG1Z02E4g9JNNEj-_oCV19psYjq5DZTTunbQ_rGVqwzPlOD8miEGR9TA4tY20/s1600/loading.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy33ueySYus_xrV3IvuZ3t4n5oBTmdOqoUrGudQdH0XTJmqJXCENEKz19O1lLoj85KMRHv2JOhU1zyHjK5dS_mD0Hft-f9aWCK6QLhYJWaV9W67uN6D-wEMehoVmxyXXqUAUNBTAosUfMv/s1600/loadingfinal1.gif]

[https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0lZsB9VWP7s04xK1lhRl8d0qUh17iM1fYcqn-0ZhyUwYCRH8v7Rxx-wZQqCcOvmNGMgE52fpZjVvp-rVNU1TFBqpTCtc-H7ZXWPHAVzy-Z5TS636yQQw5uw8mtr_oxMfjp4SpYL50lOV/s1600/preloader.GIF]

Congrats! You have successfully added this plugin to your blogger blog.

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 the comment section below.

Peace and blessings buddies. :)

This article "How To Create A Unique Loading Effect In Blogger or Website | Top 28 Eye Catching Effects" is protected by