Ajax Loader
HTML 
<!--
1
<!--
2
autor: Marco Barría
3
https://twitter.com/marco_bf
4
-->
5
 
6
<div class="loading">
7
  <div></div>
8
  <div></div>
9
  <div></div>
10
  <div></div>
11
</div>
 
CSS 
$d: 40px;
1
$d: 40px;
2
$a: 2.3s;
3
$ease: cubic-bezier(0.690, 0.245, 0.185, 1.510);
4
$color: #fa8072, #fba440, #579fbb, #906b92;
5
$alpha: 0.8;
6
 
7
.loading {
8
  position: absolute;
9
  top: 50%;
10
  left: 50%;
11
  transform: translate(-50%, -50%);
12
  width: $d;
13
  height: $d;
14
  > div {
15
    position: relative;
16
    float: left;
17
    width: $d/2;
18
    height: $d/2;
19
    animation-duration: $a;
20
    animation-iteration-count: infinite;
21
    animation-timing-function: $ease;
22
    transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
23
    opacity: $alpha;
24
    &:nth-child(1) {
25
      background-color: nth($color, 1);
26
      transform-origin: top left;
27
      animation-name: frame1;
28
    }
29
    &:nth-child(2) {
30
      background-color: nth($color, 2);
31
      transform-origin: top right;
32
      animation-name: frame2;
33
    }
34
    &:nth-child(3) {
35
      background-color: nth($color, 3);
36
      transform-origin: bottom left;
37
      animation-name: frame4;
38
    }
39
    &:nth-child(4) {
40
      background-color: nth($color, 4);
41
      transform-origin: bottom right;
42
      animation-name: frame3;
43
    }
44
  }
45
}
46
 
47
@keyframes frame1 {
48
  0% {
49
    transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
50
    opacity: $alpha;
51
    z-index: 10;
52
  }
53
  12.5% {
54
    transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);
55
    opacity: 1;
56
    z-index: 10;
57
  }
58
  25%, 100% {
59
    transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
60
    opacity: $alpha;
61
    z-index: 0;
62
  }
63
}
64
 
65
@keyframes frame2 {
66
  0%, 24.9%, 50%, 100% {
67
    transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
68
    opacity: $alpha;
69
    z-index: 0;
70
  }
71
  25% {
72
    transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
73
    opacity: $alpha;
74
    z-index: 10;
75
  }
76
  37.5% {
77
    transform: scale(2) translateX(1px) translateY(1px) translateZ(0px);
78
    opacity: 1;
79
    z-index: 10;
80
  }
81
}
82
 
83
@keyframes frame3 {
84
  0%, 49.9%, 75%, 100% {
85
    transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
86
    opacity: $alpha;
87
    z-index: 0;
88
  }
89
  50% {
90
    transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
91
    opacity: $alpha;
92
    z-index: 10;
93
  }
94
  62.5% {
95
    transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);
96
    opacity: 1;
97
    z-index: 10;
98
  }
99
}
100
 
101
@keyframes frame4 {
102
  0%, 74.9%, 100% {
103
    transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
104
    opacity: $alpha;
105
    z-index: 0;
106
  }
107
  75% {
108
    transform: scale(1) translateX(0px) translateY(0px) translateZ(0px);
109
    opacity: $alpha;
110
    z-index: 10;
111
  }
112
  87.5% {
113
    transform: scale(2) translateX(-1px) translateY(-1px) translateZ(0px);
114
    opacity: 1;
115
    z-index: 10;
116
  }
117
}
118
 
119
html,
120
body {
121
  height: 100%;
122
  overflow: hidden;
123
}
124
 
125
body {
126
  background-color: #1d2a38;
127
}
 

Square spinner

CSSDeck G+