animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back

rendered animation

Loader a Day (day 15)

1<div class="loader">
2  <div class="cubes">
3    <div class="cube">
4    	<div class="side"></div>
5    	<div class="side"></div>
6    	<div class="side"></div>
7    	<div class="side"></div>
8    	<div class="side"></div>
9    	<div class="side"></div>
10    </div>
11    <div class="cube">
12    	<div class="side"></div>
13    	<div class="side"></div>
14    	<div class="side"></div>
15    	<div class="side"></div>
16    	<div class="side"></div>
17    	<div class="side"></div>
18    </div>
19    <div class="cube">
20    	<div class="side"></div>
21    	<div class="side"></div>
22    	<div class="side"></div>
23    	<div class="side"></div>
24    	<div class="side"></div>
25    	<div class="side"></div>
26    </div>
27    <div class="cube">
28    	<div class="side"></div>
29    	<div class="side"></div>
30    	<div class="side"></div>
31    	<div class="side"></div>
32    	<div class="side"></div>
33    	<div class="side"></div>
34    </div>
35    <div class="cube">
36    	<div class="side"></div>
37    	<div class="side"></div>
38    	<div class="side"></div>
39    	<div class="side"></div>
40    	<div class="side"></div>
41    	<div class="side"></div>
42    </div>
43    <div class="cube">
44    	<div class="side"></div>
45    	<div class="side"></div>
46    	<div class="side"></div>
47    	<div class="side"></div>
48    	<div class="side"></div>
49    	<div class="side"></div>
50    </div>
51    <div class="cube">
52    	<div class="side"></div>
53    	<div class="side"></div>
54    	<div class="side"></div>
55    	<div class="side"></div>
56    	<div class="side"></div>
57    	<div class="side"></div>
58    </div>
59    <div class="cube">
60    	<div class="side"></div>
61    	<div class="side"></div>
62    	<div class="side"></div>
63    	<div class="side"></div>
64    	<div class="side"></div>
65    	<div class="side"></div>
66    </div>
67    <div class="cube">
68    	<div class="side"></div>
69    	<div class="side"></div>
70    	<div class="side"></div>
71    	<div class="side"></div>
72    	<div class="side"></div>
73    	<div class="side"></div>
74    </div>
75    <div class="cube">
76    	<div class="side"></div>
77    	<div class="side"></div>
78    	<div class="side"></div>
79    	<div class="side"></div>
80    	<div class="side"></div>
81    	<div class="side"></div>
82    </div>
83    <div class="cube">
84    	<div class="side"></div>
85    	<div class="side"></div>
86    	<div class="side"></div>
87    	<div class="side"></div>
88    	<div class="side"></div>
89    	<div class="side"></div>
90    </div>
91    <div class="cube">
92    	<div class="side"></div>
93    	<div class="side"></div>
94    	<div class="side"></div>
95    	<div class="side"></div>
96    	<div class="side"></div>
97    	<div class="side"></div>
98    </div>
99    <div class="cube">
100    	<div class="side"></div>
101    	<div class="side"></div>
102    	<div class="side"></div>
103    	<div class="side"></div>
104    	<div class="side"></div>
105    	<div class="side"></div>
106    </div>
107    <div class="cube">
108    	<div class="side"></div>
109    	<div class="side"></div>
110    	<div class="side"></div>
111    	<div class="side"></div>
112    	<div class="side"></div>
113    	<div class="side"></div>
114    </div>
115    <div class="cube">
116    	<div class="side"></div>
117    	<div class="side"></div>
118    	<div class="side"></div>
119    	<div class="side"></div>
120    	<div class="side"></div>
121    	<div class="side"></div>
122    </div>
123    <div class="cube">
124    	<div class="side"></div>
125    	<div class="side"></div>
126    	<div class="side"></div>
127    	<div class="side"></div>
128    	<div class="side"></div>
129    	<div class="side"></div>
130    </div>
131    <div class="cube">
132    	<div class="side"></div>
133    	<div class="side"></div>
134    	<div class="side"></div>
135    	<div class="side"></div>
136    	<div class="side"></div>
137    	<div class="side"></div>
138    </div>
139    <div class="cube">
140    	<div class="side"></div>
141    	<div class="side"></div>
142    	<div class="side"></div>
143    	<div class="side"></div>
144    	<div class="side"></div>
145    	<div class="side"></div>
146    </div>
147    <div class="cube">
148    	<div class="side"></div>
149    	<div class="side"></div>
150    	<div class="side"></div>
151    	<div class="side"></div>
152    	<div class="side"></div>
153    	<div class="side"></div>
154    </div>
155    <div class="cube">
156    	<div class="side"></div>
157    	<div class="side"></div>
158    	<div class="side"></div>
159    	<div class="side"></div>
160    	<div class="side"></div>
161    	<div class="side"></div>
162    </div>
163    <div class="cube">
164    	<div class="side"></div>
165    	<div class="side"></div>
166    	<div class="side"></div>
167    	<div class="side"></div>
168    	<div class="side"></div>
169    	<div class="side"></div>
170    </div>
171    <div class="cube">
172    	<div class="side"></div>
173    	<div class="side"></div>
174    	<div class="side"></div>
175    	<div class="side"></div>
176    	<div class="side"></div>
177    	<div class="side"></div>
178    </div>
179    <div class="cube">
180    	<div class="side"></div>
181    	<div class="side"></div>
182    	<div class="side"></div>
183    	<div class="side"></div>
184    	<div class="side"></div>
185    	<div class="side"></div>
186    </div>
187    <div class="cube">
188    	<div class="side"></div>
189    	<div class="side"></div>
190    	<div class="side"></div>
191    	<div class="side"></div>
192    	<div class="side"></div>
193    	<div class="side"></div>
194    </div>
195    <div class="cube">
196    	<div class="side"></div>
197    	<div class="side"></div>
198    	<div class="side"></div>
199    	<div class="side"></div>
200    	<div class="side"></div>
201    	<div class="side"></div>
202    </div>
203    <div class="cube">
204    	<div class="side"></div>
205    	<div class="side"></div>
206    	<div class="side"></div>
207    	<div class="side"></div>
208    	<div class="side"></div>
209    	<div class="side"></div>
210    </div>
211    <div class="cube">
212    	<div class="side"></div>
213    	<div class="side"></div>
214    	<div class="side"></div>
215    	<div class="side"></div>
216    	<div class="side"></div>
217    	<div class="side"></div>
218    </div>
219    <div class="cube">
220    	<div class="side"></div>
221    	<div class="side"></div>
222    	<div class="side"></div>
223    	<div class="side"></div>
224    	<div class="side"></div>
225    	<div class="side"></div>
226    </div>
227    <div class="cube">
228    	<div class="side"></div>
229    	<div class="side"></div>
230    	<div class="side"></div>
231    	<div class="side"></div>
232    	<div class="side"></div>
233    	<div class="side"></div>
234    </div>
235    <div class="cube">
236    	<div class="side"></div>
237    	<div class="side"></div>
238    	<div class="side"></div>
239    	<div class="side"></div>
240    	<div class="side"></div>
241    	<div class="side"></div>
242    </div>
243    <div class="cube">
244    	<div class="side"></div>
245    	<div class="side"></div>
246    	<div class="side"></div>
247    	<div class="side"></div>
248    	<div class="side"></div>
249    	<div class="side"></div>
250    </div>
251    <div class="cube">
252    	<div class="side"></div>
253    	<div class="side"></div>
254    	<div class="side"></div>
255    	<div class="side"></div>
256    	<div class="side"></div>
257    	<div class="side"></div>
258    </div>
259    <div class="cube">
260    	<div class="side"></div>
261    	<div class="side"></div>
262    	<div class="side"></div>
263    	<div class="side"></div>
264    	<div class="side"></div>
265    	<div class="side"></div>
266    </div>
267    <div class="cube">
268    	<div class="side"></div>
269    	<div class="side"></div>
270    	<div class="side"></div>
271    	<div class="side"></div>
272    	<div class="side"></div>
273    	<div class="side"></div>
274    </div>
275    <div class="cube">
276    	<div class="side"></div>
277    	<div class="side"></div>
278    	<div class="side"></div>
279    	<div class="side"></div>
280    	<div class="side"></div>
281    	<div class="side"></div>
282    </div>
283    <div class="cube">
284    	<div class="side"></div>
285    	<div class="side"></div>
286    	<div class="side"></div>
287    	<div class="side"></div>
288    	<div class="side"></div>
289    	<div class="side"></div>
290    </div>
291    <div class="cube">
292    	<div class="side"></div>
293    	<div class="side"></div>
294    	<div class="side"></div>
295    	<div class="side"></div>
296    	<div class="side"></div>
297    	<div class="side"></div>
298    </div>
299    <div class="cube">
300    	<div class="side"></div>
301    	<div class="side"></div>
302    	<div class="side"></div>
303    	<div class="side"></div>
304    	<div class="side"></div>
305    	<div class="side"></div>
306    </div>
307    <div class="cube">
308    	<div class="side"></div>
309    	<div class="side"></div>
310    	<div class="side"></div>
311    	<div class="side"></div>
312    	<div class="side"></div>
313    	<div class="side"></div>
314    </div>
315    <div class="cube">
316    	<div class="side"></div>
317    	<div class="side"></div>
318    	<div class="side"></div>
319    	<div class="side"></div>
320    	<div class="side"></div>
321    	<div class="side"></div>
322    </div>
323    <div class="cube">
324    	<div class="side"></div>
325    	<div class="side"></div>
326    	<div class="side"></div>
327    	<div class="side"></div>
328    	<div class="side"></div>
329    	<div class="side"></div>
330    </div>
331    <div class="cube">
332    	<div class="side"></div>
333    	<div class="side"></div>
334    	<div class="side"></div>
335    	<div class="side"></div>
336    	<div class="side"></div>
337    	<div class="side"></div>
338    </div>
339    <div class="cube">
340    	<div class="side"></div>
341    	<div class="side"></div>
342    	<div class="side"></div>
343    	<div class="side"></div>
344    	<div class="side"></div>
345    	<div class="side"></div>
346    </div>
347    <div class="cube">
348    	<div class="side"></div>
349    	<div class="side"></div>
350    	<div class="side"></div>
351    	<div class="side"></div>
352    	<div class="side"></div>
353    	<div class="side"></div>
354    </div>
355    <div class="cube">
356    	<div class="side"></div>
357    	<div class="side"></div>
358    	<div class="side"></div>
359    	<div class="side"></div>
360    	<div class="side"></div>
361    	<div class="side"></div>
362    </div>
363    <div class="cube">
364    	<div class="side"></div>
365    	<div class="side"></div>
366    	<div class="side"></div>
367    	<div class="side"></div>
368    	<div class="side"></div>
369    	<div class="side"></div>
370    </div>
371    <div class="cube">
372    	<div class="side"></div>
373    	<div class="side"></div>
374    	<div class="side"></div>
375    	<div class="side"></div>
376    	<div class="side"></div>
377    	<div class="side"></div>
378    </div>
379    <div class="cube">
380    	<div class="side"></div>
381    	<div class="side"></div>
382    	<div class="side"></div>
383    	<div class="side"></div>
384    	<div class="side"></div>
385    	<div class="side"></div>
386    </div>
387    <div class="cube">
388    	<div class="side"></div>
389    	<div class="side"></div>
390    	<div class="side"></div>
391    	<div class="side"></div>
392    	<div class="side"></div>
393    	<div class="side"></div>
394    </div>
395    <div class="cube">
396    	<div class="side"></div>
397    	<div class="side"></div>
398    	<div class="side"></div>
399    	<div class="side"></div>
400    	<div class="side"></div>
401    	<div class="side"></div>
402    </div>
403    <div class="cube">
404    	<div class="side"></div>
405    	<div class="side"></div>
406    	<div class="side"></div>
407    	<div class="side"></div>
408    	<div class="side"></div>
409    	<div class="side"></div>
410    </div>
411    <div class="cube">
412    	<div class="side"></div>
413    	<div class="side"></div>
414    	<div class="side"></div>
415    	<div class="side"></div>
416    	<div class="side"></div>
417    	<div class="side"></div>
418    </div>
419    <div class="cube">
420    	<div class="side"></div>
421    	<div class="side"></div>
422    	<div class="side"></div>
423    	<div class="side"></div>
424    	<div class="side"></div>
425    	<div class="side"></div>
426    </div>
427    <div class="cube">
428    	<div class="side"></div>
429    	<div class="side"></div>
430    	<div class="side"></div>
431    	<div class="side"></div>
432    	<div class="side"></div>
433    	<div class="side"></div>
434    </div>
435    <div class="cube">
436    	<div class="side"></div>
437    	<div class="side"></div>
438    	<div class="side"></div>
439    	<div class="side"></div>
440    	<div class="side"></div>
441    	<div class="side"></div>
442    </div>
443    <div class="cube">
444    	<div class="side"></div>
445    	<div class="side"></div>
446    	<div class="side"></div>
447    	<div class="side"></div>
448    	<div class="side"></div>
449    	<div class="side"></div>
450    </div>
451    <div class="cube">
452    	<div class="side"></div>
453    	<div class="side"></div>
454    	<div class="side"></div>
455    	<div class="side"></div>
456    	<div class="side"></div>
457    	<div class="side"></div>
458    </div>
459    <div class="cube">
460    	<div class="side"></div>
461    	<div class="side"></div>
462    	<div class="side"></div>
463    	<div class="side"></div>
464    	<div class="side"></div>
465    	<div class="side"></div>
466    </div>
467    <div class="cube">
468    	<div class="side"></div>
469    	<div class="side"></div>
470    	<div class="side"></div>
471    	<div class="side"></div>
472    	<div class="side"></div>
473    	<div class="side"></div>
474    </div>
475    <div class="cube">
476    	<div class="side"></div>
477    	<div class="side"></div>
478    	<div class="side"></div>
479    	<div class="side"></div>
480    	<div class="side"></div>
481    	<div class="side"></div>
482    </div>
483    <div class="cube">
484    	<div class="side"></div>
485    	<div class="side"></div>
486    	<div class="side"></div>
487    	<div class="side"></div>
488    	<div class="side"></div>
489    	<div class="side"></div>
490    </div>
491    <div class="cube">
492    	<div class="side"></div>
493    	<div class="side"></div>
494    	<div class="side"></div>
495    	<div class="side"></div>
496    	<div class="side"></div>
497    	<div class="side"></div>
498    </div>
499    <div class="cube">
500    	<div class="side"></div>
501    	<div class="side"></div>
502    	<div class="side"></div>
503    	<div class="side"></div>
504    	<div class="side"></div>
505    	<div class="side"></div>
506    </div>
507    <div class="cube">
508    	<div class="side"></div>
509    	<div class="side"></div>
510    	<div class="side"></div>
511    	<div class="side"></div>
512    	<div class="side"></div>
513    	<div class="side"></div>
514    </div>
515  </div>
516</div>