Floating Text Loading Animation

Namaste!

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!