How to Add Preloader Animation to Your Blog

Hi everyone, welcome to The Kathat Blog. In this article, I will show you how to create Preloader Animation for your website. First of all, you can see what it looks like so go to this page. and you can see this loading animation. We will use HTML, CSS, and JavaScript to add to our blog or website.

So below we have given. HTML and CSS code, you just have to copy and paste it and apply it to your blogger website. After this, the Preloader Animation will be added to your blogger website.

See How My Team Can  Your Website Ranked in Google

• SEO - how to measure SEO success. Track SEO metrics.
• Business Strategy - Our team writes epic content that will help you run a successful small business.
• Paid Media - We also exchange traffic through guest posting.

Learn More    Contact Us

Add Preloader Animation to Your Blog

• First, you have to go to your blogger dashboard.
• Click on Theme. 
• After that click on Edit HTML and search for the given code.

Now copy the below code and paste it above the </b:skin>.

/* Preloader */

.preloader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background:  #ffffff;
    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 .dots-container {
    display: flex;
    margin-bottom: 48px;
}

.preloader .dot {
    background: red;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 0 5px;
}

.preloader .dot.blue {
    background: #1a1aff;
    animation: bounce 1000ms infinite;
}

.preloader .dot.red {
    background:  #e60000;
    animation: bounce 1000ms infinite;
}

.preloader .dot.green {
    background: #00b33c;
    animation: bounce 1000ms infinite;
    animation-delay: 200ms;
}

.preloader .dot.yellow {
    background:  #ffcc00;
    animation: bounce 1000ms infinite;
    animation-delay: 400ms;
}

@keyframes bounce {
    50% {
        transform: translateY(16px);
    }

    100% {
        transform: translateY(0);
    }
} 

Now find it and copy the code given below and paste it right </body> above.

  <b:if cond='data:blog.url == &quot;https://www.pskathait.in/&quot;'>   
            <div class='preloader'>

        <div class='dots-container'>
            <div class='dot blue'/>
            <div class='dot red'/>
            <div class='dot green'/>
            <div class='dot yellow'/>
        </div>
    </div> 
    
  <script>  
    
const preloader = document.querySelector(&quot;.preloader&quot;);
const preloaderDuration = 800;

const hidePreloader = () =&gt; {
    setTimeout(() =&gt; {
        preloader.classList.add(&quot;hide&quot;);
    }, preloaderDuration);
}

window.addEventListener(&quot;load&quot;, hidePreloader);    
    
    </script>
  </b:if>  

So after doing all this, now you have to paste the URLhttps://www.pskathait.in/of your blog in place of the given URL and click on save theme and after that, you have to refresh your page.

So this was the Preloader Animation process today. I hope you liked the article. If you liked the article, then comment below and subscribe to our channel.

I hope you enjoy reading this blog post. If you want to do guest posts for you and get high-quality backlinks, click here.