Skip to content

Instantly share code, notes, and snippets.

@gentoid
Created March 3, 2013 15:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gentoid/5076617 to your computer and use it in GitHub Desktop.
Save gentoid/5076617 to your computer and use it in GitHub Desktop.
<h1 class="loader">
<span>З</span>
<span>а</span>
<span>г</span>
<span>р</span>
<span>у</span>
<span>з</span>
<span>к</span>
<span>а</span>
</h1>
<script>
body{
background: #CCD0D4;
}
h1.loader{
text-align: center;
text-transform: uppercase;
font-family: 'Nunito', sans-serif;
font-size: 4.6875em;
color: transparent;
letter-spacing: 0.01em;
}
.loader 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 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);}
}
.loader span:nth-child(2){
animation-delay:0.125s;
}
.loader span:nth-child(3){
animation-delay:0.25s;
}
.loader span:nth-child(4){
animation-delay:0.375s;
}
.loader span:nth-child(5){
animation-delay:0.50s;
}
.loader span:nth-child(6){
animation-delay:0.625s;
}
.loader span:nth-child(7){
animation-delay:0.75s;
}
.loader span:nth-child(8){
animation-delay:0.875s;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment