Text Loader

<h1 class="load">

<span>s</span>

<span>m</span>

<span>a</span>

<span>r</span>

<span>k</span>

<span>e</span>

<span>t</span>

<span>p</span>

<span>l</span>

<span>a</span>

<span>c</span>

<span>e</span>

</h1>

<style>

h1.load{

text-align: center;

text-transform: uppercase;

font-family: 'Nunito', sans-serif;

font-size: 2.6875em;

color: transparent;

letter-spacing: 0.01em;

}

.load span{

text-shadow:

0 0 2px rgba(204, 208, 212,0.9),

0 15px 25px rgba(0, 0, 0, 0.3),

0 -2px 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 1.20s 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);}

}

.load span:nth-child(2){

animation-delay:0.15s;

}

.load span:nth-child(3){

animation-delay:0.30s;

}

.load span:nth-child(4){

animation-delay:0.45s;

}

.load span:nth-child(5){

animation-delay:0.60s;

}

.load span:nth-child(6){

animation-delay:0.75s;

}

.load span:nth-child(7){

animation-delay:0.90s;

}

.load span:nth-child(8){

animation-delay:1.05s;

}

.load span:nth-child(9){

animation-delay:1.20s;

}

</style>