Ajax Loader
HTML 
%div.container
1
%div.container
2
  - (1..24).each do |c|
3
    %div.circle
 
CSS 
html,body { height:100%; background:black; overflow-x:hidden; }
1
html,body { height:100%; background:black; overflow-x:hidden; }
2
.container {
3
  position:relative;
4
  height: 0;
5
  padding-bottom: 100%;
6
}
7
.circle {
8
  position:absolute;
9
  top:50%; left:50%;
10
  width:90%; height:90%;
11
  border:5px solid white;
12
  border-radius:50%;
13
  margin-left:-30%; margin-top:-30%;
14
  animation-delay: inherit;
15
  transform:scale(.333);
16
}
17
.circle:nth-of-type(6n  ) { margin-top:-70%; margin-left:-60%; }
18
.circle:nth-of-type(6n+1) { margin-top:-70%; margin-left:-30%; }
19
.circle:nth-of-type(6n+2) { margin-top:-45%; margin-left:-15%; }
20
.circle:nth-of-type(6n+3) { margin-top:-18%; margin-left:-30%; }
21
.circle:nth-of-type(6n+4) { margin-top:-18%; margin-left:-60%; }
22
.circle:nth-of-type(6n+5) { margin-top:-45%; margin-left:-75%; }
23
 
24
.circle:nth-child(-n+ 6) { animation:scale 6s cubic-bezier(0,.61,.5,1) infinite; }
25
.circle:nth-child(-n+12):not(:nth-child(-n+ 6)) { animation:scale 6s -4.5s cubic-bezier(0,.61,.5,1) infinite; }
26
.circle:nth-child(-n+18):not(:nth-child(-n+12)) { animation:scale 6s -3s cubic-bezier(0,.61,.5,1) infinite; }
27
.circle:nth-child(-n+24):not(:nth-child(-n+18)) { animation:scale 6s -1.5s cubic-bezier(0,.61,.5,1) infinite; }
28
 
29
@keyframes scale {
30
  0%   { opacity:0; transform:scale(.1); }
31
  5%   { opacity:1; }
32
  100% { opacity:0; transform:scale(1); }
33
}
 

Circle Asplosions

CSSDeck G+