Amazing Loading Animation Using Only HTML & CSS | Pure CSS Loader for your website using HTML & CSS

Watch Video -  https://youtu.be/DT8DPe3HLHA
In this video, we are going to build an animated CSS loader without JavaScript & jQuery. Pure CSS Loader - Animated Loading effect for your website using HTML and CSS (No Javascript).

Note: You should also include a -WebKit- prefix for browsers that do not support animation and transform properties.

HTML Code - 

<section class="loader">
        <div class="loader-text">
             <span style="--i:1;">A</span>
             <span style="--i:2;">N</span>
             <span style="--i:3;">Y</span>
         </div>
</section>


CSS Code - Animation Part Only
.loader-text span {
    animation: animate 1s ease-in-out infinite;
    animation-delay: calc(0.1s * var(--i));
}

@keyframes animate {
    0% {
        transform: translateY(0px);
    }
    20% {
        transform: translateY(-15px);
    }
    50%, 100% {
        transform: translateY(0px);
    }
}