Make a TEXT loading template.

I will be showing how to create a loading text using HTML, CSS and JS.

HTML
Create a div and inside div, create span with each character in different span and give class name as "sp"[it can be anything].

 <div class="loading">
        <span id="l" class="sp">L</span>
        <span id="o" class="sp">O</span>
        <span id="a" class="sp">A</span>
        <span id="d" class="sp">D</span>
        <span id="i" class="sp">I</span>
        <span id="n" class="sp">N</span>
        <span id="g" class="sp">G</span>
      </div>

CSS

body{
  background-color:black;
}
.loading{
  width:400px;
  text-align:center;
  margin:50px auto;
  position:relative;
}
span{
  font-size:2rem;
  font-weight:bolder;
  margin:10px;
  color:white;
  position:absolute;
}

Once above code is done. As we have used position as absolute, all span will collapse in one place.
so we will give space of 40px between each span and we will also give some animation-delay between each character animation. Because we don't want every character to animate at the same time.

  #l{left:10px;}  
  #o{left:50px;animation-delay:0.4s;}
  #a{left:90px;animation-delay:0.8s;}
  #d{left:130px;animation-delay:1.2s;}
  #i{left:170px;animation-delay:1.6s;}
  #n{left:210px;animation-delay:2s;}
  #g{left:250px;animation-delay:2.4s;}

Now we will be defining two @keyframes with different name "loading" and "second-loading". Which we will toggle between using js.

@keyframes loadingL{
   0%{scale:1;opacity:1;}
    50%{scale:1.8;filter: blur(1px);opacity:0.5;}
    100%{scale:1;opacity:1;}
  }
  @keyframes secondloading{
    0%{scale:1;opacity:1;}
    50%{scale:1.8;filter: blur(1px);opacity:0.5;}
    100%{scale:1;opacity:1;}
  }

Adding animation to two class to toggle between.

.sp{
    animation: loadingL 1s linear forwards;
  }
  .new-sp{
    animation: secondloading 1s linear forwards;
  }

Now we just have to toggle between .sp and .new-sp after some interval of time.

Javascript
Code to toggle between classes after 3.4 second.

 const sp= document.querySelectorAll(".sp");

 const time= setInterval(()=>{
    sp.forEach(element=>{
        if (element.classList.contains("sp")) {
            element.classList.replace("sp", "new-sp");
        } else {
            element.classList.replace("new-sp" ,"sp");
        }
    })
 },3400);

For final result visit my pen in Codepen.
Text loader

Thank you guys.
Ask, If any queries.