Source codes:
<!DOCTYPE html>
<html>
<head>
<title> Text Loading Animation </title>
<style type=”text/css”>
body{
background: #010e1a;
width: 100%;
height: 100vh;
}
h1.loader{
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
font-size: 40px;
color: transparent;
letter-spacing: 0.01em;
position: relative;
top: 50%;
margin: auto;
width: 50%;
}
.loader span{
text-shadow:
0 0 2px rgba(204,208,212, 0.9),
0 15px 25px rgba(0,0,0,0.3),
0 -25px 3px rgba(0,0,0,0.1),
0 -5px 10px rgba(255,255,255,0.5),
0 5px 10px rgba(0,0,0,0.3),
0 3px 4px rgba(255,255,255,0.2),
0 0 20px rgba(255,255,255,0.45) ;
animation: loading 0.85s ease-in-out infinite alternate;
}
@keyframes loading {
to{
text-shadow:
0 0 2px rgba(204,208,212,0.2),
0 0 3px rgba(0,0,0,0.02),
0 0 0 rgba(0,0,0,0),
0 0 0 rgba(255,255,255,0),
0 0 0 rgba(0,0,0,0),
0 0 0 rgba(255,255,255,0),
0 0 0 rgba(255,255,255,0);
}
}
</style>
</head>
<body>
<h1 class=”loader”>
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</h1>
</body>
</html>
