Ajax Loader
×
HTML 
<div class="loading">
1
<div class="loading">
2
          <div class="cr-fountaing">
3
              <div class="fountaing-circle cr-fountaing_1"></div>
4
              <div class="fountaing-circle cr-fountaing_2"></div>
5
              <div class="fountaing-circle cr-fountaing_3"></div>
6
              <div class="fountaing-circle cr-fountaing_4"></div>
7
              <div class="fountaing-circle cr-fountaing_5"></div>
8
              <div class="fountaing-circle cr-fountaing_6"></div>
9
              <div class="fountaing-circle cr-fountaing_7"></div>
10
              <div class="fountaing-circle cr-fountaing_8"></div>
11
          </div>
12
      </div>
 
CSS 
.cr-fountaing {
1
.cr-fountaing {
2
position: absolute;
3
width: 100px;
4
left: 50%;
5
top: 50%;
6
height: 12px;
7
margin: -1px 0 0 -50px;
8
}
9
.fountaing-circle {
10
position: absolute;
11
top: 0;
12
background-color: #000000;
13
width: 7px;
14
height: 7px;
15
-moz-animation-name: bounce_fountaing;
16
-moz-animation-duration: 1.3s;
17
-moz-animation-iteration-count: infinite;
18
-moz-animation-direction: linear;
19
-moz-transform: scale(.3);
20
-moz-border-radius: 8px;
21
-webkit-animation-name: bounce_fountaing;
22
-webkit-animation-duration: 1.3s;
23
-webkit-animation-iteration-count: infinite;
24
-webkit-animation-direction: linear;
25
-webkit-transform: scale(.3);
26
-webkit-border-radius: 8px;
27
-ms-animation-name: bounce_fountaing;
28
-ms-animation-duration: 1.3s;
29
-ms-animation-iteration-count: infinite;
30
-ms-animation-direction: linear;
31
-ms-transform: scale(.3);
32
-ms-border-radius: 8px;
33
-o-animation-name: bounce_fountaing;
34
-o-animation-duration: 1.3s;
35
-o-animation-iteration-count: infinite;
36
-o-animation-direction: linear;
37
-o-transform: scale(.3);
38
-o-border-radius: 8px;
39
animation-name: bounce_fountaing;
40
animation-duration: 1.3s;
41
animation-iteration-count: infinite;
42
animation-direction: linear;
43
transform: scale(.3);
44
border-radius: 8px;
45
}.cr-fountaing_1 {
46
left: 0;
47
-moz-animation-delay: 0.52s;
48
-webkit-animation-delay: 0.52s;
49
-ms-animation-delay: 0.52s;
50
-o-animation-delay: 0.52s;
51
animation-delay: 0.52s;
52
}.cr-fountaing_2 {
53
left: 13px;
54
-moz-animation-delay: 0.65s;
55
-webkit-animation-delay: 0.65s;
56
-ms-animation-delay: 0.65s;
57
-o-animation-delay: 0.65s;
58
animation-delay: 0.65s;
59
}.cr-fountaing_3 {
60
left: 25px;
61
-moz-animation-delay: 0.78s;
62
-webkit-animation-delay: 0.78s;
63
-ms-animation-delay: 0.78s;
64
-o-animation-delay: 0.78s;
65
animation-delay: 0.78s;
66
}.cr-fountaing_4 {
67
left: 38px;
68
-moz-animation-delay: 0.91s;
69
-webkit-animation-delay: 0.91s;
70
-ms-animation-delay: 0.91s;
71
-o-animation-delay: 0.91s;
72
animation-delay: 0.91s;
73
}.cr-fountaing_5 {
74
left: 50px;
75
-moz-animation-delay: 1.04s;
76
-webkit-animation-delay: 1.04s;
77
-ms-animation-delay: 1.04s;
78
-o-animation-delay: 1.04s;
79
animation-delay: 1.04s;
80
}.cr-fountaing_6 {
81
left: 63px;
82
-moz-animation-delay: 1.17s;
83
-webkit-animation-delay: 1.17s;
84
-ms-animation-delay: 1.17s;
85
-o-animation-delay: 1.17s;
86
animation-delay: 1.17s;
87
}.cr-fountaing_7 {
88
left: 75px;
89
-moz-animation-delay: 1.3s;
90
-webkit-animation-delay: 1.3s;
91
-ms-animation-delay: 1.3s;
92
-o-animation-delay: 1.3s;
93
animation-delay: 1.3s;
94
}.cr-fountaing_8 {
95
left: 88px;
96
-moz-animation-delay: 1.43s;
97
-webkit-animation-delay: 1.43s;
98
-ms-animation-delay: 1.43s;
99
-o-animation-delay: 1.43s;
100
animation-delay: 1.43s;
101
} @-moz-keyframes bounce_fountaing {
102
0% {
103
-moz-transform:scale(1);
104
background-color:#000000;
105
}
106
 100% {
107
-moz-transform:scale(.3);
108
background-color:#FFFFFF;
109
}
110
}
111
 @-webkit-keyframes bounce_fountaing {
112
0% {
113
-webkit-transform:scale(1);
114
background-color:#000000;
115
}
116
 100% {
117
-webkit-transform:scale(.3);
118
background-color:#FFFFFF;
119
}
120
}
121
 @-ms-keyframes bounce_fountaing {
122
0% {
123
-ms-transform:scale(1);
124
background-color:#000000;
125
}
126
 100% {
127
-ms-transform:scale(.3);
128
background-color:#FFFFFF;
129
}
130
}
131
 @-o-keyframes bounce_fountaing {
132
0% {
133
-o-transform:scale(1);
134
background-color:#000000;
135
}
136
 100% {
137
-o-transform:scale(.3);
138
background-color:#FFFFFF;
139
}
140
}
141
 @keyframes bounce_fountaing {
142
0% {
143
transform:scale(1);
144
background-color:#000000;
145
}
146
 100% {
147
transform:scale(.3);
148
background-color:#FFFFFF;
149
}
150
}
 

Untitled

CSSDeck G+