Ajax Loader
×
HTML 
<div class="ali">
1
<div class="ali">
2
  <div class="shadow"></div>
3
  <div class="body-outside">
4
    <div class="ass"></div>
5
    <div class="body">
6
      <div class="hand"></div>
7
      <div class="foot"></div>
8
    </div>
9
  </div>
10
  <div class="header-outside">
11
    <div class="ears behide"></div>
12
    <div class="ears"></div>
13
    <div class="nose"></div>
14
    <div class="header">
15
      <div class="face">
16
        <div class="eyes"></div>
17
      </div>
18
    </div>
19
  </div>
20
</div>
21
 
22
<div class="ali blue">
23
  <div class="shadow"></div>
24
  <div class="body-outside">
25
    <div class="ass"></div>
26
    <div class="body">
27
      <div class="hand"></div>
28
      <div class="foot"></div>
29
    </div>
30
  </div>
31
  <div class="header-outside">
32
    <div class="ears behide"></div>
33
    <div class="ears"></div>
34
    <div class="nose"></div>
35
    <div class="header">
36
      <div class="face">
37
        <div class="eyes"></div>
38
      </div>
39
    </div>
40
  </div>
41
</div>
42
 
43
<div class="ali green">
44
  <div class="shadow"></div>
45
  <div class="body-outside">
46
    <div class="ass"></div>
47
    <div class="body">
48
      <div class="hand"></div>
49
      <div class="foot"></div>
50
    </div>
51
  </div>
52
  <div class="header-outside">
53
    <div class="ears behide"></div>
54
    <div class="ears"></div>
55
    <div class="nose"></div>
56
    <div class="header">
57
      <div class="face">
58
        <div class="eyes"></div>
59
      </div>
60
    </div>
61
  </div>
62
</div>
63
 
64
<div class="ali purple">
65
  <div class="shadow"></div>
66
  <div class="body-outside">
67
    <div class="ass"></div>
68
    <div class="body">
69
      <div class="hand"></div>
70
      <div class="foot"></div>
71
    </div>
72
  </div>
73
  <div class="header-outside">
74
    <div class="ears behide"></div>
75
    <div class="ears"></div>
76
    <div class="nose"></div>
77
    <div class="header">
78
      <div class="face">
79
        <div class="eyes"></div>
80
      </div>
81
    </div>
82
  </div>
83
</div>
 
CSS 
body{padding:20px;}
1
body{padding:20px;}
2
 
3
.blue { margin-left: 175px; }
4
.blue .body,
5
.blue .body::before,
6
.blue .header-outside::before,
7
.blue .hand,
8
.blue .foot,
9
.blue .header,
10
.blue .ears,
11
.blue .ears::before
12
{ background: hsl(220, 90%, 50%); }
13
 
14
.green { margin-top: 150px; }
15
.green .body,
16
.green .body::before,
17
.green .header-outside::before,
18
.green .hand,
19
.green .foot,
20
.green .header,
21
.green .ears,
22
.green .ears::before
23
{ background: hsl(110, 90%, 50%); }
24
 
25
.purple { margin-top: 150px; margin-left: 175px; }
26
.purple .body,
27
.purple .body::before,
28
.purple .header-outside::before,
29
.purple .hand,
30
.purple .foot,
31
.purple .header,
32
.purple .ears,
33
.purple .ears::before
34
{ background: hsl(270, 90%, 50%); }
35
 
36
.body{
37
  position:absolute;left:0;top:0;z-index:1;
38
  width:30px;height:30px;
39
  background: hsl(0, 90%, 50%);
40
  border:2px solid #000;
41
  border-radius:30px 10px 20px 20px/15px 30px 5px 10px;
42
}
43
.body::before{content:' ';position:absolute;left:4px;top:10px;z-index:5;
44
  width:14px;height:18px;
45
  background: hsl(0, 90%, 50%);
46
}
47
.header-outside::before{content:' ';position:absolute;left:106px;top:93px;z-index:5;
48
  width:12px;height:12px;
49
  background: hsl(0, 90%, 50%);
50
  border-radius:0 0 12px 0/0 0 12px 0;
51
  -webkit-transform:rotateZ(-36deg);
52
}
53
.hand{
54
  position:absolute;bottom:-5px;left:8px;z-index:2;
55
  -webkit-transform:rotateZ(14deg) skew(-16deg);
56
  width:26px;height:12px;
57
  background: hsl(0, 90%, 50%);
58
  border:2px solid #000;
59
  border-left:0 none;
60
  border-radius:0px 26px 20px 3px/0px 8px 8px 5px;
61
}
62
.foot{
63
  position:absolute;left:30px;bottom:-2px;z-index:1;
64
  width:24px;height:10px;
65
  background: hsl(0, 90%, 50%);
66
  border:2px solid #000;
67
  border-radius:12px 12px 18px 4px/8px 6px 6px 2px;
68
}
69
.ass{
70
  position:absolute;top:0;left:24px;z-index:-1;
71
  width:16px;height:28px;
72
  background:#FFF;
73
  border:2px solid #000;
74
  border-radius:2px 16px 12px 0/2px 18px 10px 0;
75
}
76
.header{
77
  position:absolute;left:6px;top:20px;z-index:2;
78
  width:104px;height:94px;
79
  background: hsl(0, 90%, 50%);
80
  border:2px solid #000;
81
  border-radius:66px 34px 45px 55px/70px 60px 20px 30px;
82
  overflow:hidden;
83
}
84
.face{position:absolute;left:-5px;bottom:0;
85
  width:34px;height:70px;
86
  background:#ffddbb;
87
  border-radius:30px 0 6px 10px/16px 50px 20px 5px;
88
}
89
.face::before{content:' ';position:absolute;right:-12px;bottom:10px;
90
  width:20px;height:68px;
91
  background:#ffddbb;
92
  border-radius:8px 12px 8px 10px/10px 50px 20px 5px;
93
  -webkit-transform:rotateZ(5deg);
94
}
95
.eyes{position:absolute;left:8px;top:39px;
96
  width:32px;height:2px;
97
  border-bottom:4px solid #000;
98
  border-radius:2px 2px 15px 15px;
99
  -webkit-transform:rotateZ(10deg);
100
}
101
.eyes::before{content:' ';position:absolute;left:15px;top:-30px;
102
  width:10px;height:4px;
103
  background:#000;
104
  border-radius:4px/3px 3px 1px 1px;
105
106
}
107
.eyes::after{content:' ';position:absolute;left:17px;top:-27px;
108
  width:6px;height:4px;
109
  background:#ffddbb;
110
  border-radius:3px/3px 3px 1px 1px;
111
112
}
113
.nose{position:absolute;left:0;top:84px;z-index:5;
114
  width:3px;height:3px;
115
  background:#ffddbb;
116
  border:4px solid #000;
117
  border-bottom-width:3px;
118
  border-right-width:3px;
119
  border-radius:5px;
120
121
}
122
.ears{
123
  position:absolute;left:62px;top:6px;z-index:5;
124
  width:46px;height:46px;
125
  background: hsl(0, 90%, 50%);
126
  border:2px solid #000;
127
  border-bottom:0 none;
128
  border-radius:10px 36px 36px 10px/23px 34px 6px 23px;
129
  -webkit-transform:rotateZ(50deg);
130
}
131
.ears::before{content:' ';position:absolute;bottom:-6px;right:-6px;
132
  width:48px;height:24px;
133
  background: hsl(0, 90%, 50%);
134
  -webkit-transform:rotateZ(-30deg);
135
136
}
137
.ears::after{content:' ';position:absolute;top:11px;left:4px;
138
  width:5px;height:22px;
139
  background:#ffddbb;
140
  border-radius:2px 3px 1px 4px/16px 16px 6px 6px;
141
  -webkit-transform:rotateZ(-8deg);
142
143
}
144
.ears.behide{left:54px;top:7px;z-index:-1;
145
  -webkit-transform:rotateZ(55deg);
146
}
147
.ears.behide::before,
148
.ears.behide::after{display:none;}
149
 
150
.shadow{position:absolute;bottom:16px;left:20px;z-index:0;}
151
.shadow::before,
152
.shadow::after{content:' ';position:absolute;
153
  background:#CCC;
154
}
155
.shadow::before{left:8px;top:0px;
156
  width:90px;height:20px;
157
  border-radius:45px/10px;
158
}
159
.shadow::after{left:80px;top:0px;
160
  width:50px;height:14px;
161
  border-radius:15px/7px;
162
}
163
.body-outside{position:absolute;top:80px;left:100px;z-index:1;
164
  width:62px;height:36px;
165
}
166
.header-outside{
167
  position:absolute;top:0;left:0;z-index:2;
168
  width:118px;height:120px;
169
}
170
 
171
.ali{position:absolute;top:100px;left:100px;
172
  height:120px;width:200px;-webkit-transform:translateX(300px);
173
  -webkit-animation:ali 6s 0.4s infinite;
174
}
175
.header-outside{
176
  -webkit-animation:head 0.6s infinite;
177
}
178
.ears{
179
  -webkit-animation:ears 0.6s infinite;
180
}
181
.ears.behide{
182
  -webkit-animation:ears-behide 0.6s infinite;
183
}
184
.body-outside{
185
  -webkit-animation:body 0.6s infinite;
186
}
187
.foot{
188
  -webkit-animation:foot 0.6s infinite;
189
}
190
.shadow{
191
  -webkit-animation:shadow 0.6s infinite;
192
}
193
@-webkit-keyframes head{
194
  0%{-webkit-transform:rotateZ(2deg)}
195
  70%{-webkit-transform:rotateZ(-2deg)}
196
  100%{-webkit-transform:rotateZ(2deg)}
197
}
198
@-webkit-keyframes body{
199
  0%{-webkit-transform:translateX(1px) rotateZ(-8deg) scaleY(1);}
200
  70%{-webkit-transform:translateX(-3px) translateY(-1px) rotateZ(0deg) scaleY(1.1);}
201
  100%{-webkit-transform:translateX(1px) rotateZ(-8deg) scaleY(1);}
202
}
203
@-webkit-keyframes foot{
204
  0%{-webkit-transform:translateX(0) rotateZ(2deg);}
205
  70%{-webkit-transform:translateX(-4px) rotateZ(20deg);}
206
  100%{-webkit-transform:translateX(0) rotateZ(2deg);}
207
}
208
@-webkit-keyframes ears{
209
  0%{-webkit-transform:translateX(3px) translateY(3px) rotateZ(60deg);}
210
  70%{-webkit-transform:translateX(0) translateY(0px) rotateZ(50deg);}
211
  100%{-webkit-transform:translateX(3px) translateY(3px) rotateZ(60deg);}
212
}
213
@-webkit-keyframes ears-behide{
214
  0%{-webkit-transform:translateX(1px) translateY(2px) rotateZ(60deg);}
215
  70%{-webkit-transform:translateX(0) translateY(0px) rotateZ(50deg);}
216
  100%{-webkit-transform:translateX(1px) translateY(2px) rotateZ(60deg);}
217
}
218
@-webkit-keyframes shadow{
219
  0%{-webkit-transform:translateX(-5px)  translateY(-1px);}
220
  70%{-webkit-transform:translateX(0) translateY(1px);}
221
  100%{-webkit-transform:translateX(-5px)  translateY(-1px);}
222
}
223
@-webkit-keyframes ali{
224
  0%{-webkit-transform:translateX(300px)}
225
  10%{-webkit-transform:translateX(270px)}
226
  20%{-webkit-transform:translateX(240px)}
227
  30%{-webkit-transform:translateX(210px)}
228
  40%{-webkit-transform:translateX(180px)}
229
  50%{-webkit-transform:translateX(150px)}
230
  60%{-webkit-transform:translateX(120px)}
231
  70%{-webkit-transform:translateX(90px)}
232
  80%{-webkit-transform:translateX(60px)}
233
  90%{-webkit-transform:translateX(30px)}
234
  100%{-webkit-transform:translateX(0px)}
235
}
236
 
237
 
238
 
239
 
240
 
241
 
242
 
243
 
 

Untitled

CSSDeck G+