How to Add a Preloader Animation to Blogger Site

Preloader Animation in Blogger

Let's Do a Demo Here...! 

View Demo

Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1:Login in your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme

Step 3: Click the arrow down icon next to customize button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it.

/* Preloader by ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ */ .pldW{position:fixed;top:0;left:0;bottom:0;right:0;z-index:990;display:flex;background:rgba(255, 255, 255, 0.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:center;align-items:center} .pldW.flat{background:#fffdfc} .pldW.fadeOut{animation:loadFadeOut 1s backwards} .pldW.hidden{display:none} .pldW .crcl{width:70px;position:relative;display:flex;flex-wrap:wrap;margin-bottom:-15px;justify-content:center;align-items:center} .crcl .r, .crcl .g, .crcl .y, .crcl .b{position:relative;width:10px;height:10px;border-radius:10px;margin:2px} .crcl .r{background-color:#ea4335;animation:movingUp 0.5s infinite alternate} .crcl .b{background-color:#4285f4;animation:movingUp 0.5s 0.2s infinite alternate} .crcl .g{background-color:#34a853;animation:movingUp 0.5s .5s infinite alternate} .crcl .y{background-color:#fbbc05;animation:movingUp 0.5s .7s infinite alternate} .drK .pldW{background:rgba(0, 0, 0, 0.1)} .drK .pldW.flat{background:#1e1e1e} @keyframes loadFadeOut{from{opacity:1} to{opacity:0}} @keyframes movingUp{from{top:0px} to{top:-15px}}

Don't forget to change .drK with your website theme dark mode class, if your theme did not have a dark mode feature then keep default!

Step 6: Then find the code </body> and paste the following Codes just above it.

<b:if cond='data:view.isSinglePost'></b:if>

<!--[ Preloader by ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ, Add class name 'flat' to 'blur' for blur background  ]-->

  <div class='pldW flat'>

    <div class='crcl'>

      <div class='r'></div>

      <div class='b'></div>

      <div class='g'></div>

      <div class='y'></div>

    </div>

  </div>

  <script>

    /*<![CDATA[*/

    document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { document.querySelector('.pldW').classList.add('fadeOut') }, 2000);

      setTimeout(function() { document.querySelector('.pldW').classList.add('hidden') }, 2850) }); /*]]>*/

  </script>

Step 7: Now Click to Save our Theme.

Conclusion

This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.

Copyright ©

ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ