Home
Blogger

New Preloading effect for Blogger

2

Hello Guys! Welcome to Shiva Technic World in this article Iam going to give you new preloading effect codes for Blogger. So let's check.

Which type of codes are used?

This preloading effect codes have HTM, JS and CSS. 

How it works?

The Preloading animation will show till the page completely load then it will show the website main content is also responsive.

How to add?

First copy this CSS and paste it above  </head> or &lt;!--<head/>--&gt;&lt;/head&gt;
<style>
    /* 
    * Name = STW-Preloader
    * Designed = Shiva Technic World
    * Website = https://shivatechnciworldtech.blogspot.com
    */
    .stw-preloader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #FFF;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 400ms;
    z-index: 2000;
}

.stw-preloader.stw-hide {
    opacity: 0;
    pointer-events: none;
}

.stw-preloader .stw-preloader-text {
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-size: 15px;
}

.stw-preloader .stw-image-container {
    display: flex;
    margin-bottom: 48px;
}
</style>

Copy this code and paste it above </body> or   &lt;!--</body>--&gt;&lt;/body&gt;  

<div class='stw-preloader'>

        <div class='stw-image-container'>
        <img alt='Broken image' height='150' src='https://media2.giphy.com/media/T81rDcEtsVXOi7mf72/giphy.gif?cid=790b761175f10e5b05bda0624f8986772a683e527674523e&amp;rid=giphy.gif&amp;ct=g' width='150'/>
        </div>

        <div class='stw-preloader-text'>
            Loading...
        </div>
    </div>


<script>
const preloader = document.querySelector(&quot;.stw-preloader&quot;);
const preloaderDuration = 100; // You can change preloader duration here

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

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

Last words

Hope this article will help you. If you have any doubts related to this article ask me in the comment. Thanks for visiting our site!