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

rendered animation

Pure HTML/CSS CogLoader Version 3

css0.5ssource ↗
1<div class="loader">
2  <div class="overlay one"></div>
3  <div class="overlay two"></div>
4  
5  <div class="cog one">
6    <div class="overlay"></div>
7    <div class="wrap one">
8      <div class="box one"></div>
9      <div class="box two"></div> 
10      <div class="box filler one"></div> 
11      <div class="box filler two"></div>
12      <div class="box filler base one"></div>
13      <div class="box filler base two"></div>
14    </div>
15
16    <div class="wrap two">
17      <div class="box one"></div>
18      <div class="box two"></div>  
19      <div class="box filler one"></div> 
20      <div class="box filler two"></div>
21      <div class="box filler base one"></div>
22      <div class="box filler base two"></div>
23    </div>
24  </div>
25
26  <div class="cog two">
27    <div class="wrap one">
28      <div class="box one"></div>
29      <div class="box two"></div> 
30      <div class="box filler one"></div> 
31      <div class="box filler two"></div>
32      <div class="box filler base one"></div>
33      <div class="box filler base two"></div>
34    </div>
35
36    <div class="wrap two">
37      <div class="box one"></div>
38      <div class="box two"></div>  
39      <div class="box filler one"></div> 
40      <div class="box filler two"></div>
41      <div class="box filler base one"></div>
42      <div class="box filler base two"></div>
43    </div>
44    <div class="overlay"></div>
45  </div>
46</div>