Floating Text Loading Animation | HTML CSS Text Loader Effect

Namaste!

Floating Text Loading Animation

Hey, today we created cool text floating animation from scratch. used one or two colors and then animated them with keyframes keyword and transformed them as the text looks like they are floating.

Floating Text Loading Animation Youtube Tutorial

Floating Text Loading Animation

Floating Text Loading Animation Source Code

Below code should be taken inside your <body> Your Code Here </body> tags

.html file code

 <div class="loader">
        <span>L</span>
        <span>O</span>
        <span>A</span>
        <span>D</span>
        <span>I</span>
        <span>N</span>
        <span>G</span>
    </div>

Below code should be taken inside your <style> Your Code Here </style> tags or in .css file

.css file code

*{
    margin: 0;
    padding: 0;
    background-color: rgb(22, 22, 22);
}
.loader{
  text-align: center;
  height: 40px;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}
.loader span{
    font-size: 2.5rem;
    font-weight: 700;
    transform: translateZ(-100%);
    display: inline-block;
    color: red;
    animation: animate 2s infinite;
    transition: all 0.5s;
}
.loader span:nth-child(1) {
    animation-delay: 0.1s;
}
.loader span:nth-child(2) {
    animation-delay: 0.2s;
}
.loader span:nth-child(3) {
    animation-delay: 0.3s;
}
.loader span:nth-child(4) {
    animation-delay: 0.4s;
}
.loader span:nth-child(5) {
    animation-delay: 0.5s;
}
.loader span:nth-child(6) {
    animation-delay: 0.6s;
}
.loader span:nth-child(7) {
    animation-delay: 0.7s;
}
@keyframes animate{
    0% {
        color: rgb(245, 20, 20);
        transform: translateY(0);
        margin-left:0 ;
    }
    25%{
        transform: translateY(-15%);
        margin-left: 10px;
        text-shadow: 0 15px 5px rgba(0, 0, 0, 1);
    }
    100%{
        color: rgb(255, 255, 255, .1);
        transform: translateY(0);
        margin-left: 0;
    }
}

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