You're lucky if you click here. Chance of a lifetime!

New Preloading effect for Blogger

عبدالرحمن

 

Hello Guys! Welcome to apps2link 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 = shivatechnicworldtech.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!

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.