How to add Preload (loading) Animation in Blogger Website

Welcome! In this post, we will give you a Blogger code, which will add a nice CSS preload (loading) animation to your Blogger website. This CSS preload (loading) animation will make your site more attractive while loading content. Viewers also like this CSS preload (loading) animation as it's very appealing and doesn't make viewers bored while the Blogger.com loads your content which makes viewers come again and again. This CSS preload (loading) animation will automatically be shown to viewers while the page is loading and when the page is completely loaded this CSS preload (loading) animation will automatically disappear.

The below-given CSS preload (loading) animation script is HTML, CSS, and Javascript which can easily run on your Blogger website. However, this CSS preload (loading) animation script will not directly impact your Blogger content loading time or speed. It's very easy to install this script you just need to follow the below-given tutorial carefully. 

Below-given CSS preload (loading) animation script will have 2 parts - 

Script(code) - 

This will be the code that will display your CSS preload (loading) animation on your website. 

• Log in to your Blogger Account and Open your Blogger website dashboard in which you want the CSS preload (loading) animation to be.'
• Go to the Themes section in the left menu 
• Click on Edit HTML
• Press Ctrl + f (Windows) and CMD + F (Mac) and search for "]]></b:skin>" in your HTML Code. 
• After you find the "]]></b:skin>" in your HTML code, paste the below-given CSS code above the "]]></b:skin>" code 

 

CSS Code -

.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('GIF-URL-here') 50% 50% no-repeat rgb(249,249,249); }

• Now, you need the replace the "gifurlhere" with your favorite GIF images 

Now we need to add the HTML/JS code to your website to load the CSS preload (loading) animation properly on time.

• Go back to the same, Edit HTML section and press Ctrl + f (Windows) and CMD + F (Mac) and search for "<body" in your HTML Code.
• After you find the "<body" in your HTML code, paste the below-given HTML code below the "<body" code.

HTML Code - 

<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> <div class="loader"></div>

• Save Changes and ALL DONE!! 

(The GIF URL you will paste in your CSS code will be used as CSS preload (loading) animation on your website and you can change it whenever you like, just change the URL link from the new GIF URL link.)

Animation GIF -

This will be the GIF or animation which will be shown as your CSS preload (loading) animation on your website. 

How to get good GIF animation?

You can get amazing and best-looking GIF animation on this article, This article has 50+ preloading and GIF animations which you can use on your website.