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
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