Custom preloading animation in blogger with site name

1. Paste before </body>

<div class="preloader">

        <div class="preloader-text">

            One AI Hub

        </div>

    </div>

<script>

const preloader = document.querySelector(".preloader");

const preloaderDuration = 500;

const hidePreloader = () => {

    setTimeout(() => {

        preloader.classList.add("hide");

    }, preloaderDuration);

}

window.addEventListener("load", hidePreloader);

</script>

2. paste before ]]></b:skin>

/* Preloader Animation In Blogger */

.preloader {

    position: fixed;

    width: 100%;

    height: 100vh;

    background: #0f0f0f;

    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: #ffffff;

    text-transform: inherit;

    letter-spacing: 2px;

    font-size: 40px;

    font-weight: 700;

    animation: zoomInOut 2s infinite;

}

@keyframes zoomInOut {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.2);

    }

    100% {

        transform: scale(1);

    }

}

PREVIEW CLICK HERE