Ajax Loader
HTML 
<div class="yinyang">
1
<div class="yinyang">
2
  <div class="yin"><div class="yinc"><div class="yind"></div></div></div>
3
  <div class="yang"><div class="yangc"><div class="yangd"></div></div></div>
4
</div>
5
 
 
CSS 
@-webkit-keyframes r {
1
@-webkit-keyframes r {
2
  from { -webkit-transform: rotate(0deg); }
3
  to { -webkit-transform: rotate(-360deg); }
4
}
5
@-webkit-keyframes c1 {
6
  from { background-color: #333; }
7
  50% { background-color: #c30; }
8
  to { background-color: #333; }
9
}
10
@-webkit-keyframes c2 {
11
  from { background-color: #c30; }
12
  50% { background-color: #333; }
13
  to { background-color: #c30; }
14
}
15
 
16
@-moz-keyframes r {
17
  from { -moz-transform: rotate(0deg); }
18
  to { -moz-transform: rotate(-360deg); }
19
}
20
@-moz-keyframes c1 {
21
  from { background-color: #333; }
22
  50% { background-color: #c30; }
23
  to { background-color: #333; }
24
}
25
@-moz-keyframes c2 {
26
  from { background-color: #c30; }
27
  50% { background-color: #333; }
28
  to { background-color: #c30; }
29
}
30
 
31
@-o-keyframes r {
32
  from { -o-transform: rotate(0deg); }
33
  to { -o-transform: rotate(-360deg); }
34
}
35
@-o-keyframes c1 {
36
  from { background-color: #333; }
37
  50% { background-color: #c30; }
38
  to { background-color: #333; }
39
}
40
@-o-keyframes c2 {
41
  from { background-color: #c30; }
42
  50% { background-color: #333; }
43
  to { background-color: #c30; }
44
}
45
 
46
@keyframes r {
47
  from { transform: rotate(0deg); }
48
  to { transform: rotate(-360deg); }
49
}
50
@keyframes c1 {
51
  from { background-color: #333; }
52
  50% { background-color: #c30; }
53
  to { background-color: #333; }
54
}
55
@keyframes c2 {
56
  from { background-color: #c30; }
57
  50% { background-color: #333; }
58
  to { background-color: #c30; }
59
}
60
 
61
.yinyang {
62
  width:640px; height: 640px;
63
  overflow: hidden;
64
  margin: 64px auto;
65
}
66
 
67
.yinyang, #svgelem {
68
 
69
  -webkit-animation-name: r;
70
  -webkit-animation-duration: 3s;
71
  -webkit-animation-iteration-count: infinite;
72
  -webkit-animation-timing-function: linear;
73
 
74
  -moz-animation-name: r;
75
  -moz-animation-duration: 3s;
76
  -moz-animation-iteration-count: infinite;
77
  -moz-animation-timing-function: linear;
78
 
79
  -o-animation-name: r;
80
  -o-animation-duration: 3s;
81
  -o-animation-iteration-count: infinite;
82
  -o-animation-timing-function: linear;
83
 
84
  animation-name: r;
85
  animation-duration: 3s;
86
  animation-iteration-count: infinite;
87
  animation-timing-function: linear;
88
}
89
 
90
.yin, .yang {
91
  width: 50%;
92
  height: 100%;
93
  float: left;
94
  position: relative;
95
}
96
 
97
.yin {
98
  background-color: #333;
99
  -webkit-border-radius: 320px 0 0 320px;
100
  -moz-border-radius: 320px 0 0 320px;
101
  border-radius: 320px 0 0 320px;
102
}
103
 
104
.yin, .yinc, .yangd {
105
  -webkit-animation-name: c1;
106
  -webkit-animation-duration: 3s;
107
  -webkit-animation-iteration-count: infinite;
108
  -webkit-animation-timing-function: ease-in;
109
 
110
  -moz-animation-name: c1;
111
  -moz-animation-duration: 3s;
112
  -moz-animation-iteration-count: infinite;
113
  -moz-animation-timing-function: ease-in;
114
 
115
  -o-animation-name: c1;
116
  -o-animation-duration: 3s;
117
  -o-animation-iteration-count: infinite;
118
  -o-animation-timing-function: ease-in;
119
 
120
  animation-name: c1;
121
  animation-duration: 3s;
122
  animation-iteration-count: infinite;
123
  animation-timing-function: ease-in;
124
}
125
 
126
.yang, .yangc, .yind {
127
  -webkit-animation-name: c2;
128
  -webkit-animation-duration: 3s;
129
  -webkit-animation-iteration-count: infinite;
130
  -webkit-animation-timing-function: ease-in;
131
 
132
  -moz-animation-name: c2;
133
  -moz-animation-duration: 3s;
134
  -moz-animation-iteration-count: infinite;
135
  -moz-animation-timing-function: ease-in;
136
 
137
  -o-animation-name: c2;
138
  -o-animation-duration: 3s;
139
  -o-animation-iteration-count: infinite;
140
  -o-animation-timing-function: ease-in;
141
 
142
  animation-name: c2;
143
  animation-duration: 3s;
144
  animation-iteration-count: infinite;
145
  animation-timing-function: ease-in;
146
}
147
 
148
.yang {
149
  background-color: #c30;
150
  -webkit-border-radius: 0 320px 320px 0;
151
  border-radius: 0 320px 320px 0;
152
}
153
 
154
.yinc {
155
  width: 100%;
156
  height: 50%;
157
  background-color: #333;
158
  -webkit-border-radius: 50%;
159
  border-radius: 50%;
160
  position: absolute;
161
  bottom: 0;
162
  left: 50%;
163
  z-index: 11;
164
}
165
 
166
.yangc {
167
  width: 100%;
168
  height: 50%;
169
  background-color: #c30;
170
  -webkit-border-radius: 50%;
171
  border-radius: 100%;
172
  position: absolute;
173
  top: 0;
174
  right: 50%;
175
  z-index: 9;
176
}
177
 
178
.yind {
179
  width: 25%;
180
  height: 25%;
181
  background-color: #c30;
182
  -webkit-border-radius: 50%;
183
  border-radius: 50%;
184
  z-index: 10;
185
  position: absolute;
186
  left: 50%;
187
  top: 50%;
188
  margin-left: -12.5%;
189
  margin-top: -12.5%;
190
}
191
 
192
.yangd {
193
  width: 25%;
194
  height: 25%;
195
  background-color: #333;
196
  -webkit-border-radius: 50%;
197
  border-radius: 50%;
198
  z-index: 10;
199
  position: absolute;
200
  left: 50%;
201
  top: 50%;
202
  margin-left: -12.5%;
203
  margin-top: -12.5%;
204
}
 

CSS3: Yin-Yang Fish

CSSDeck G+