Wavy Text Loading Animation

Namaste!

Wavy Text Loading

Today’s this article will be based on making a cool loading animation with text or “wavy text loading animaton” we can call it.

Wavy Text Loading Animation Demo

Wavy Text Loading Animation

Wavy Text Loading Animation Source Code

Below code should be put between the <body> Your Code Here </body> tags.

.html file code

<div class="wavy">
             <span style="--i:1;color:red">C</span>
             <span style="--i:2;color:red">O</span>
             <span style="--i:3;color:red">D</span>
             <span style="--i:4;color:red">I</span>
             <span style="--i:5;color:red">N</span>
             <span style="--i:6;color:red">G</span>
             <span style="--i:7;"> </span>
             <span style="--i:8;"> </span> 
             <span style="--i:9;">H</span>
             <span style="--i:10;">I</span>
             <span style="--i:11;">N</span>
             <span style="--i:12;">D</span>
             <span style="--i:13;">I</span>
        </div>

Put this code inside <style> Your Code Here <style>tags or into style.css file

.css file code

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

*{
    margin:0;
    padding:0;
    font-family:poppins;
}
body {
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#000;
}
.wavy{
    position:relative;
    -webkit-box-reflect:below -17px linear-gradient(transparent, rgba(0,0,0,0.2));
}
.wavy span{
    position:relative;
    display:inline-block;
    color:#fff;
    font-size:4.5em;
    text-transform:capitalize;
    animation:animate 3.5s ease-in-out infinite;
    animation-delay:calc(0.1s * var(--i));
}
@keyframes animate{
    0%{
        transform:translateY(0px);
    }
    
    40%{
        transform:translateY(-30px);
    }
}

Thank You!