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.