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
Neeraj Lamba
Neeraj Lamba
Articles: 39

Leave a Reply

Your email address will not be published. Required fields are marked *

I'm not a robot *Time limit exceeded. Please complete the captcha once again.

Website Design Trends in 2022 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