Ajax Loader
HTML 
<!--
1
<!--
2
autor: Marco Barría
3
https://twitter.com/marco_bf
4
-->
5
 
6
<div class="car"></div>
 
CSS 
html,
1
html,
2
body{
3
  height:100%;
4
  overflow:hidden;
5
}
6
 
7
body{
8
  background:rgba(52, 152, 219, 0.5);
9
  background: -webkit-linear-gradient(top, rgba(52, 152, 219, 0.5) 60%,rgba(250, 252, 219, 0.5) 100%);
10
  background: -moz-linear-gradient(top, rgba(52, 152, 219, 0.5) 60%,rgba(250, 252, 219, 0.5) 100%);
11
}
12
 
13
.car,
14
.car:before,
15
.car:after{
16
  position:absolute;
17
}
18
 
19
.car{
20
  background:rgb(230, 126, 34);
21
  border-radius:100%;
22
  box-shadow:
23
  
24
     /* ruedas */
25
  
26
    5px 12px 0 5px rgb(189, 195, 199), /* izquierda */
27
    30px 11px 0 5px rgb(189, 195, 199),
28
    5px 12px 0 8px rgb(52, 73, 94), /* izquierda */
29
    30px 11px 0 8px rgb(52, 73, 94),
30
  
31
    /* ventana */
32
  
33
    14px -11px 0 5px rgb(236, 240, 241),
34
    27px -11px 0 5px rgb(236, 240, 241),
35
  
36
    /* chasis */
37
  
38
    0 -1px 0 10px rgb(230, 126, 34),
39
    5px -1px 0 10px rgb(230, 126, 34),
40
    10px -1px 0 10px rgb(230, 126, 34),
41
    15px -1px 0 10px rgb(230, 126, 34),
42
    20px -1px 0 10px rgb(230, 126, 34),
43
    25px -1px 0 10px rgb(230, 126, 34),
44
    30px -1px 0 10px rgb(230, 126, 34),
45
  
46
    /* techo */
47
  
48
    15px -11px 0 10px rgb(230, 126, 34),
49
    20px -11px 0 10px rgb(230, 126, 34),
50
    26px -11px 0 10px rgb(230, 126, 34);
51
52
  /* El width y el height del div deben ser inferiores al tamaño total del box-shadow, de esa manera controlaremos distintas variantes de tamaños.*/
53
54
  width:2px; height:2px;
55
  left:50%; top:50%;
56
  margin-left:-15px; margin-top:-40px;
57
  animation:simulacion 1s linear infinite;
58
}
59
 
60
@keyframes simulacion{
61
  25%, 75%{
62
  box-shadow:
63
  
64
     /* ruedas */
65
  
66
    5px 7px 0 5px rgb(189, 195, 199), /* izquierda */
67
    30px 8px 0 5px rgb(189, 195, 199),
68
    5px 7px 0 8px rgb(52, 73, 94), /* izquierda */
69
    30px 8px 0 8px rgb(52, 73, 94),
70
  
71
    /* ventana */
72
  
73
    14px -9px 0 5px rgb(236, 240, 241),
74
    27px -9px 0 5px rgb(236, 240, 241),
75
  
76
    /* chasis */
77
  
78
    0 1px 0 10px rgb(230, 126, 34),
79
    5px 1px 0 10px rgb(230, 126, 34),
80
    10px 1px 0 10px rgb(230, 126, 34),
81
    15px 1px 0 10px rgb(230, 126, 34),
82
    20px 1px 0 10px rgb(230, 126, 34),
83
    25px 1px 0 10px rgb(230, 126, 34),
84
    30px 1px 0 10px rgb(230, 126, 34),
85
  
86
    /* techo */
87
  
88
    15px -9px 0 10px rgb(230, 126, 34),
89
    20px -9px 0 10px rgb(230, 126, 34),
90
    26px -9px 0 10px rgb(230, 126, 34);  
91
  }
92
  50%, 100%{
93
   box-shadow:
94
  
95
     /* ruedas */
96
  
97
    5px 12px 0 5px rgb(189, 195, 199), /* izquierda */
98
    30px 11px 0 5px rgb(189, 195, 199),
99
    5px 12px 0 8px rgb(52, 73, 94), /* izquierda */
100
    30px 11px 0 8px rgb(52, 73, 94),
101
  
102
    /* ventana */
103
  
104
    14px -11px 0 5px rgb(236, 240, 241),
105
    27px -11px 0 5px rgb(236, 240, 241),
106
  
107
    /* chasis */
108
  
109
    0 -1px 0 10px rgb(230, 126, 34),
110
    5px -1px 0 10px rgb(230, 126, 34),
111
    10px -1px 0 10px rgb(230, 126, 34),
112
    15px -1px 0 10px rgb(230, 126, 34),
113
    20px -1px 0 10px rgb(230, 126, 34),
114
    25px -1px 0 10px rgb(230, 126, 34),
115
    30px -1px 0 10px rgb(230, 126, 34),
116
  
117
    /* techo */
118
  
119
    15px -11px 0 10px rgb(230, 126, 34),
120
    20px -11px 0 10px rgb(230, 126, 34),
121
    26px -11px 0 10px rgb(230, 126, 34);  
122
  }
123
}
124
 
125
.car:before,
126
.car:after{
127
  content:"";
128
}
129
 
130
.car:before{
131
  background:rgba(236, 240, 241, 0);
132
  border-radius:100%;
133
  box-shadow:
134
  
135
    /* nubes */
136
  
137
    -80px 60px 10px 5px rgba(236, 240, 241, 0.5),
138
    -60px 50px 10px 10px rgba(236, 240, 241, 0.5),
139
    -30px 60px 10px 15px rgba(236, 240, 241, 0.9),
140
    -10px 60px 10px 20px rgba(255, 255, 255, 0.8),
141
  
142
    110px 50px 10px 5px rgba(236, 240, 241, 0.5),
143
    90px 60px 10px 10px rgba(236, 245, 245, 0.8),
144
    70px 50px 10px 15px rgba(236, 240, 241, 0.5),
145
    50px 60px 10px 20px rgba(236, 240, 241, 0.8);
146
147
  width:1px; height:1px;
148
  left:50%; top:50%;
149
  animation:nubes 2s linear infinite;
150
}
151
 
152
@keyframes nubes{
153
  50%{
154
      box-shadow:
155
  
156
    /* nubes */
157
  
158
    -82px 59px 8px 5px rgba(255, 255, 255, 0.5),
159
    -63px 52px 12px 10px rgba(236, 240, 241, 0.5),
160
    -35px 63px 10px 15px rgba(236, 240, 241, 0.9),
161
    -8px 58px 10px 20px rgba(255, 255, 255, 0.8),
162
  
163
    112px 46px 10px 5px rgba(236, 240, 241, 0.5),
164
    93px 58px 10px 10px rgba(255, 255, 255, 0.8),
165
    68px 52px 10px 15px rgba(236, 240, 241, 0.5),
166
    52px 61px 10px 20px rgba(255, 255, 255, 0.8);
167
  }
168
}
169
 
170
.car:after{
171
  background:rgb(46, 204, 113);
172
  border-radius:100%;
173
  box-shadow:1px 0px 20px 1px rgba(255, 255, 255, 0.3);
174
  width:82px; height:78px;
175
  left:50%; top:50%;
176
  margin-top:17px; margin-left:-25px;
177
  animation:rotar 1s linear infinite;
178
}
179
 
180
@keyframes rotar{
181
  100%{
182
    transform:rotateZ(360deg);
183
  }
184
}
 
JavaScript 
// Es un experimento de single element utilizando box-shadow y animaciones Pseudo
1
// Es un experimento de single element utilizando box-shadow y animaciones Pseudo
2
// La idea es investigar sobre el comportamiento de los Pseudo-elements usando animaciones.
 

Orange car

CSSDeck G+