Glowing Text Loading Animation - WMI

programming tips & tricks , css , html

Glowing Text Loading Animation

Glowing Text Loading Animation

CSS

body{
 margin:0px;padding:0px;background:#262222;
}
UL{
position: absolute;
top:50%;
left:50%;
display: flex;
transform: translate(-50% ,-50%);
}
ul li{
  list-style: none;
  letter-spacing: 15px;
  font-size: 5em;
  font-family: fantasy;
  color:#484848;
  animation: ani 1.2s linear infinite;
}
ul li:nth-child(1){
  animation-delay: .2s;
}
ul li:nth-child(2){
  animation-delay: .6s;
}
ul li:nth-child(3){
  animation-delay: .8s;
}
ul li:nth-child(4){
  animation-delay: 1.0s;
}
ul li:nth-child(5){
  animation-delay: 1.4s;
}
ul li:nth-child(6){
  animation-delay: 1.8s;
}
ul li:nth-child(7){
  animation-delay: 1.12s;
}
@keyframes ani {
  0%{
     color:#44848;
     text-shadow: none;
  }
  90%{
     color:#44848;
     text-shadow: none;
  }
  100%{
     color:#fff900;
     text-shadow: 0 0 7px #fff900,0 0 70px #fff123;
  }
}

HTML

<ul>
  <li>L</li>
  <li>O</li>
  <li>A</li>
  <li>D</li>
  <li>I</li>
  <li>N</li>
  <li>G</li>
</ul>

try it

See the Pen Glowing Text Loading Animation Tutorial - Html Css Blinking Text Effect by omar (@omaf) on CodePen.