Ajax Loader
HTML 
.container
1
.container
2
  - (1...12).each do |c|
3
    .wave
 
CSS 
$n:12; /* Make sure it's the same as the HAML */
1
$n:12; /* Make sure it's the same as the HAML */
2
$bgColor:#B9AF8B;
3
$waveColor:#229789;
4
$animLength: 8; /* In seconds */
5
$sunPercent:30%; /* Width / 2 & height of sun */
6
 
7
html,body { height:100%; margin:0; }
8
body { background-color:$bgColor; }
9
.container {
10
  position: relative;
11
  width: 100%;
12
  height: 0;
13
  background-image: linear-gradient(to bottom, transparent 50%, $bgColor 50%),
14
    radial-gradient(ellipse at center, $waveColor 50%, $bgColor 50%);
15
  padding-top: 100%;
16
  overflow: hidden;
17
}
18
.wave {
19
  background-color:$waveColor;
20
  width:100%;
21
  height:50% / $n;
22
  position:absolute;
23
  left:0;
24
  perspective:400px;
25
  transform-origin:top center;
26
}
27
 
28
@for $i from 1 to $n {
29
  @keyframes wave#{$i} {
30
    0% { transform:scaleY(1.1 - (1 / $i)) rotateX(0); }
31
    100% { transform:scaleY(1.1 - (1 / $i)) rotateX(360deg); }
32
  }
33
  .wave:nth-of-type(#{$i}) {
34
    top:50% + (50% / $n * ($i - 1)) - .5%;
35
    animation:wave#{$i} ($animLength + s) (- ($animLength / 8) * ($i / $n) + s) linear infinite;
36
  }
37
}
 

SCSS Waves

CSSDeck G+