Skip to content

Instantly share code, notes, and snippets.

@frozonfreak
Created July 23, 2013 03:26
Show Gist options
  • Save frozonfreak/6059638 to your computer and use it in GitHub Desktop.
Save frozonfreak/6059638 to your computer and use it in GitHub Desktop.
A CodePen by Joacim Nilsson. Loading animation - This is just a simple loading animation based on 10 p tags just looping the exact same animation but with different delays.
#loading
- (1..10).each do
%p
body{
text-align:center;
}
#loading{
width:200px;
height:100px;
margin:100px auto;
}
p{
height:80px;
width:6px;
border-radius:3px;
background:#333;
display:inline-block;
animation:loader 1.3s infinite;
}
@keyframes loader{
50% { height:6px; margin-top:74px; opacity:.1; }
}
p:nth-child(1) {animation-delay:.1s;}
p:nth-child(2) {animation-delay:.2s;}
p:nth-child(3) {animation-delay:.3s;}
p:nth-child(4) {animation-delay:.4s;}
p:nth-child(5) {animation-delay:.5s;}
p:nth-child(6) {animation-delay:.6s;}
p:nth-child(7) {animation-delay:.7s;}
p:nth-child(8) {animation-delay:.8s;}
p:nth-child(9) {animation-delay:.9s;}
p:nth-child(10){animation-delay:1s;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment