How to Add a Preloader Animation to Blogger

Hello! Welcome to Tecky AaryaN. 

You are looking for How To How to Add a Preloader Animation to Blogger then this post is just for you.

 

Preloader Animation in Blogger

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 Tecky AaryaN */ .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 Tecky AaryaN, 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

I hope you have successfully added Preloder. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright: 

Tecky AaryaN

Go to Link

Prev And Next