How to add Preloader on Blogger Website 2022
I said earlier that we can add Preloader using any gif file or CSS3 with Javascript but if you have a custom domain you can add any progress bar or Preloader to your website without any code from HubSpot’s PACE app through your Cloudflare account.
But we will not discuss CSS3 and Cloudflare applications here. we will cover both topics in a future article.
Add Preloader Using Gifs or A PNG:
This is the most common and most used method to add a preloader by bloggers for their blog or website, you must need a gif or APNG image for this method, you can use any background, your logo presentation, text animations, loaders, bars even any image as a PreLoader
So let’s first find gifs, APNG images, or create animated gifs, then we’ll discuss how to add these images/loaders to our site.
Here are some websites where you can find loader gifs and upload them for your blog, and you can choose your own images or animations as a starter:
- Loading.io
- icons8.com
- Giphy.com
- behance.net
- tenor.com
- flevix.com (Recommended)
- pinterest.com
and many others, even if you can search for Preloader in Google, you will find many preloaders in the image section and choose and use any of them.Make sure your Preloader image should be optimized. we recommend flevix.com for the awesome Preloader because of the quality and size. they offer SVG animation, so you should choose flevix. Some Preloader gifs, which you can download and use on your website.
How to Create your own loading animation or Preloader?
If you are a graphic designer, you will probably have no problem creating animations or uploads for your blogger/Blogspot website. But if you are not one, you can create your own animation using many online websites like Loading.io.
Loading.io offers many tools that can help to make any icon, text, symbol or image. They also offer a ready to use preloader, and you can choose one.
How to Add Animated image/loading animation in Blogger Theme?
It should be noted that this part will be a little complicated, so look carefully because if there is even a slight error then the Preloader will not work, and make sure you take a backup before changing anything.
Step 1. Log in to your Blogger Account and Go to your Blogger Dashboard
Step 2. Click on Theme >> Edit HTML >> Click anywhere in the HTML Editor and press CTRL+F for Search Box which will appear on the right top side of HTML Editor.
Step 3. Now Search ]]></b:skin>
Step 4. Now, Copy the below CSS Code and Paste the just before ]]></b:skin>
.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);}
Change Image URL with your Loading Animation URL (For image URL upload your Preloader as an image in the widget under layout section, again open that widget copy image URL and remove that widget).
Step 5. Now, Search <body> tag in HTML Section and copy and paste below code just after <body> tag.
<div class="loader"></div>
Step 6. Now, Search </head> tag in HTML Section and copy and paste below code just before </head> tag.
<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>
Now save the Theme.
