Home
Blogger Guide
Coding Guide

How to add Preloadinng Effect on blogger


hello dude, welcome to our Pixabin official blog. let see how to create a Websites Preloading effect on blogger Website.

how to create a preloading effect on blogger

  • Open your blogger dashboard.
  • Next, Open the "Theme" Section and Click Edit Html Option
  • After, Find ]]></b:skin> Tag on Theme
  • Copy the below CSS Script and paste above on ]]></b:skin>  Tag. 
    • /* Preloader effect by Blogger Pixabin Official */

.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);
    }
}
  • After, Find </body> Tag on theme Script
  • Copy the below Html+JavaScript and Paste 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...
        </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>
  • Now Preloader Script is Ready to Rock.

Final Words

We are hope this preloading blogger script is helpful to design your blogger website. If you want to more information like this article. Please follow our PixabinOfficial blog on Google News, Youtube channel and Telegram.

1 comment

  1. Hi :)