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 {
3
    -webkit-transform: rotate(0deg);
4
  }
5
  to {
6
    -webkit-transform: rotate(-360deg);
7
  }
8
}
9
 
10
 
11
@-webkit-keyframes c1 {
12
  from {
13
    background-color: #333;
14
  }
15
  50% {
16
    background-color: #c30;
17
  }
18
  to {
19
    background-color: #333;
20
  }
21
}
22
 
23
@-webkit-keyframes c2 {
24
  from {
25
    background-color: #c30;
26
  }
27
  50% {
28
    background-color: #333;
29
  }
30
  to {
31
    background-color: #c30;
32
  }
33
}
34
 
35
 
36
.yinyang {
37
  width:640px; height: 640px;
38
 
39
  -webkit-animation-name: r;
40
  -webkit-animation-duration: 3s;
41
  -webkit-animation-iteration-count: infinite;
42
  -webkit-animation-timing-function: linear;
43
}
44
 
45
.yin, .yang {
46
  width: 50%;
47
  height: 100%;
48
  float: left;
49
  position: relative;
50
}
51
 
52
.yin {
53
  background-color: #333;
54
  border-radius: 320px 0 0 320px;
55
  -webkit-border-radius: 320px 0 0 320px;
56
 
57
}
58
 
59
.yin, .yinc, .yangd {
60
  -webkit-animation-name: c1;
61
  -webkit-animation-duration: 3s;
62
  -webkit-animation-iteration-count: infinite;
63
  -webkit-animation-timing-function: ease-in;
64
}
65
 
66
.yang, .yangc, .yind {
67
  -webkit-animation-name: c2;
68
  -webkit-animation-duration: 3s;
69
  -webkit-animation-iteration-count: infinite;
70
  -webkit-animation-timing-function: ease-in;
71
}
72
 
73
.yang {
74
  background-color: #c30;
75
  border-radius: 0 320px 320px 0;
76
  -webkit-border-radius: 0 320px 320px 0;
77
}
78
 
79
.yinc {
80
  width: 100%;
81
  height: 50%;
82
  background-color: #333;
83
  border-radius: 50%;
84
  -webkit-border-radius: 50%;
85
  position: absolute;
86
  bottom: 0;
87
  left: 50%;
88
  z-index: 11;
89
}
90
 
91
.yangc {
92
  width: 100%;
93
  height: 50%;
94
  background-color: #c30;
95
  border-radius: 50%;
96
  -webkit-border-radius: 50%;
97
  position: absolute;
98
  top: 0;
99
  right: 50%;
100
  z-index: 9;
101
}
102
 
103
.yind {
104
  width: 25%;
105
  height: 25%;
106
  background-color: #c30;
107
  border-radius: 50%;
108
  -webkit-border-radius: 50%;
109
  z-index: 10;
110
  position: absolute;
111
  left: 50%;
112
  top: 50%;
113
  margin-left: -12.5%;
114
  margin-top: -12.5%;
115
}
116
 
117
.yangd {
118
  width: 25%;
119
  height: 25%;
120
  background-color: #333;
121
  border-radius: 50%;
122
  -webkit-border-radius: 50%;
123
  z-index: 10;
124
  position: absolute;
125
  left: 50%;
126
  top: 50%;
127
  margin-left: -12.5%;
128
  margin-top: -12.5%;
129
}
130
 
 

YinYang

CSSDeck G+