How to Add Preloader Effect on Blogger

Have you ever seen a web site that displays an animated preloader object before page rendering? affirmative, you will have seen this kind of website that shows a Preloader before showing its contents. Today, we'll find out How to Add Preloader Effect on Blogger. This contrivance is developed with CSS and a chunk of JS code. you would like to put in those snippets to your template by following the steps mentioned here.

Hello Guyzz, welcome to our Tech & Fun Zone official blog. In this Article we will discuss about how to create a Websites Preloading effect on blogger Website. So, without wasting any time let's get started for How to Add Preloader Effect on Blogger.

Short Talk

There are Most similar tutorials currently running on the web use jquery, there is nothing wrong with victimisation jquery, however if your blog does not use jquery earlier, it is a shame if you simply need to put in the preloader / preloading impact, you've got to install js jquery in your blog first.

Most people use jquery sometimes for reasons that area unit easier to use and writing shorter / shorter code, whereas pure javascript needs writing longer code, however if you simply need to make a preloader / preloading impact it does not need heaps of code therefore we will use pure javascript it'll be higher sensible.

What is Preloader Effect?

When you visit a preloader enabled web content (just as mine), there you can saw an animated object seems for some moments, and through this time, the website contents stay invisible. once preloader completes its loading method to the marked time, it fades away, and therefore the contents of the positioning become visible.

How Preloader Spinner Work?

This spinner loader is shown anyplace on your Blogger blogs. you'll opt for the sole homepage, solely post pages, solely static pages and solely on a specific page/post. However, i might suggest to show it only on the homepage. By applying this result to your entire blog, you wish to rethink the construct of good user expertise.

How to Add Preloader Effect on Blogger

Adding CSS

1. Open your blogger dashboard.
2. Next, Click on the "Theme" Section and Click Edit Html Option
3. After, Find ]]></b:skin> Tag on Theme
4. Copy the below CSS Script and paste above on ]]></b:skin>  Tag.

/* Preloader effect by Techandfunzone */

.preloader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #f7f7f2;
    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);
    }
}

Adding JavaScript Code

1. Next, Find the</body> Tag on theme Script
2. Copy the below Html+JavaScript code and Paste it Above on</body> Tag.

<div class='preloader'>

        <div class='dots-container'>
            <div class='dot red'/>
            <div class='dot yellow'/>
            <div class='dot green'/>
        </div>

        <div class='preloader-text'>
             Loading...Wait a Moment
        </div>
    </div>


<script>
const preloader = document.querySelector(&quot;.preloader&quot;);
const preloaderDuration = 500;

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

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

3. And in Last Don't forget to click on "Save" to save the template.
4. That's it, Now Your Preloader Script is Ready to Rock.

Final Words

I hope this preloading blogger script is helpful to design your blogger website. If you want any more information like this article. Please follow our Tech & Fun Zone Telegram Channel for updates.

Hopefully, the Above tutorial has completely helped you to learn How to Add Preloader Effect on Blogger. If you have got any issue in understanding this tutorial. Then in fact you'll be able to inquire from me by commenting or Contact us

Was it helpful? If it was then don’t forget to share this article with your other friends too. Thank you for visiting. Happy Blogging..

Go to Link

© Tech & Fun Zone