Floating Text Loading Animation | HTML CSS Text Loader Effect


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

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);
  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 ;
        transform: translateY(-15%);
        margin-left: 10px;
        text-shadow: 0 15px 5px rgba(0, 0, 0, 1);
        color: rgb(255, 255, 255, .1);
        transform: translateY(0);
        margin-left: 0;

Thank You!

Share your love
Neeraj Lamba
Neeraj Lamba
Articles: 62

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.