Wavy Text Loading Animation

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

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!

Share your love
Default image
Neeraj Lamba
Articles: 38

Leave a Reply

Your email address will not be published.

I'm not a robot *Captcha loading...

5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games learn about Operating systems and OS Structure Design
Secured By miniOrange