How to Add Preload Animation in Blogger Website

Hi to all in this article I am going to tell you all about how to add preload animation in blogger website easily in just few minutes.

So read the below provided steps completely, if you miss any one step then you may get error while saving the code in your theme section.

How to Add Preload Animation in Blogger Website

Steps to Add Preload Animation in Blogger Website

Step-1: Login to your Blogger dashboard by using your login credentials.

Step-2: Click on Theme -> Click on Customize -> choose Back Up -> Download Theme.

Step-3: Now again click on Theme -> Click on Arrow button -> Click on Edit HTML -> Theme Code Section.

Step-4: Now copy the below given HTML & JavaScript code and paste just above </body> tag or closing body tag.

<!--[ Paste the below code above </body> ]--> <div class="preloader"> <div class="dots-container"> <div class="dot red"></div> <div class="dot green"></div> <div class="dot yellow"></div> </div> <div class="preloader-text"> Loading... </div> </div> <script> const preloader = document.querySelector(".preloader"); const preloaderDuration = 500; const hidePreloader = () => { setTimeout(() => { preloader.classList.add("hide"); }, preloaderDuration); } window.addEventListener("load", hidePreloader); </script>
Copy

Step-5: Now copy the below provided CSS code and paste just above ]]></b:skin> or in additional CSS section in your theme.

<!--[ Paste the below code above ]]></b:skin> ]--> /* Preloader Animation In Blogger */ .preloader { position: fixed; width: 100%; height: 100vh; background: #0f0f0f; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 400ms; z-index: 2000; } .preloader.hide { opacity: 0; pointer-events: none; } .preloader .preloader-text { color: #838383; text-transform: uppercase; letter-spacing: 8px; font-size: 15px; } .preloader .dots-container { display: flex; margin-bottom: 48px; } .preloader .dot { background: red; width: 20px; height: 20px; border-radius: 50%; margin: 0 5px; } .preloader .dot.red { background: #ef476f; animation: bounce 1000ms infinite; } .preloader .dot.green { background: #06d6a0; animation: bounce 1000ms infinite; animation-delay: 200ms; } .preloader .dot.yellow { background: #ffd166; animation: bounce 1000ms infinite; animation-delay: 400ms; } @keyframes bounce { 50% { transform: translateY(16px); } 100% { transform: translateY(0); } }
Copy

Step-6: Now click on Save Button.

Step-7: Now your code will start processing and after some time you can see a message i.e. updated successfully.

Step-8: Now you have successfully added preload animation in blogger website.

Note: 

If you need animation in only home page and not to show in posts, pages then you need to paste below "if condition" code in the "HTML Code" as given in step-4 and you need to add your website url in the place of URL.

<b:if cond= 'data:blog.url == "URL"'>

</b:if>

If you want to increase the time of preload then you need to visit to JavaScript code pasted in your theme and in the place of 500 duration, increase it based on your interest.

Conclusion

If you follow above provided steps then you can add preload animation in your blogger website easily in just few minutes.