Birthday

July 14, 2012 is TipRicks's Birthday, Please Prepare and Send Good Wishes to its team!

UnderStood
TipRicks is under maintenance! If you found any error please let us know. Contact Us ×

Hello!

Click one of our representatives below to chat on WhatsApp

Support Customer Service Center
+923084774257
You can also send us an email to support@tipricks.com
Hello! What can I do for you?
×
How can I help you?

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

SHARE:

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




        Was this article helpful?

        Thanks! Your feedback will help us to improve our Services.

        COMMENTS

        BLOGGER: 3

        Need help? Contact to our support center at +92 308 477 4257
        Name

        Agriculture PPT Templates,2,AI Tools,1,Amazon,1,AskTipRicks,9,Blogger,48,Blogger-SEO,6,Blogger-Templates,1,Blogger-Tutorials,32,Blogger-Widgets,11,Blogging-Tips,7,Books,1,Business,1,Computer PPT Templates,1,Computer-Tutorials,1,Creative-PowerPoint-Templates,2,Digital Marketing,1,Domain,1,Ecommerce,1,Facebook,4,Free-Mobile-Data,1,Freenom,1,General,7,Google-Adsense,4,Google-Analytics,2,Google-Classroom,3,Instagram,2,Internet,1,Interviews,1,Islamic PPT Templates,1,jQuery,1,Marketing,1,Medical PPT Templates,1,Microsoft-Word,3,Mobile-Marketing,1,Motivation,1,MS Word,1,News,25,News-Updates,26,Oppo-Mobile-Features,1,PDF,1,PowerPoint-Templates,7,Resume-Templates,2,Reviews,3,SEO,8,Social-Media,6,Tech-News,15,TrueCaller,1,Twitter,1,Videos,24,Vlogging,1,Web-Hosting,1,Whatsapp,3,WordPress,8,WordPress-SEO,1,WordPress-Themes,1,WordPress-Tutorials,4,Youtube,5,
        ltr
        item
        TipRicks Blog: How To Create A Unique Loading Effect In Blogger or Website | Top 28 Eye Catching Effects
        How To Create A Unique Loading Effect In Blogger or Website | Top 28 Eye Catching Effects
        https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfuVxfezP3IJfamYRemzOml5b3aW2v8wv08hHMyJa9CCpX8OBoCm7N6hTVO8qA-S7vHANKenTUXP_VgcXe2PoAaBT-2KNhYzgJee2TArUVjs-m4kMY35NFXaRKDhZSxax1h6yl1ygJ2iau/s320/How+to+Create+a+Unique+Loading+Effect+in+Blog.png
        https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfuVxfezP3IJfamYRemzOml5b3aW2v8wv08hHMyJa9CCpX8OBoCm7N6hTVO8qA-S7vHANKenTUXP_VgcXe2PoAaBT-2KNhYzgJee2TArUVjs-m4kMY35NFXaRKDhZSxax1h6yl1ygJ2iau/s72-c/How+to+Create+a+Unique+Loading+Effect+in+Blog.png
        TipRicks Blog
        https://blog.tipricks.com/2016/03/how-to-create-unique-loading-effect-in.html
        https://blog.tipricks.com/
        https://blog.tipricks.com/
        https://blog.tipricks.com/2016/03/how-to-create-unique-loading-effect-in.html
        true
        7070217950916442682
        UTF-8
        Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy