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

rendered animation

Hexagonal Loading Animation (CSS3)

1<body>
2		<div class="socket">
3			<div class="gel center-gel">
4				<div class="hex-brick h1"></div>
5				<div class="hex-brick h2"></div>
6				<div class="hex-brick h3"></div>
7			</div>
8			<div class="gel c1 r1">
9				<div class="hex-brick h1"></div>
10				<div class="hex-brick h2"></div>
11				<div class="hex-brick h3"></div>
12			</div>
13			<div class="gel c2 r1">
14				<div class="hex-brick h1"></div>
15				<div class="hex-brick h2"></div>
16				<div class="hex-brick h3"></div>
17			</div>
18			<div class="gel c3 r1">
19				<div class="hex-brick h1"></div>
20				<div class="hex-brick h2"></div>
21				<div class="hex-brick h3"></div>
22			</div>
23			<div class="gel c4 r1">
24				<div class="hex-brick h1"></div>
25				<div class="hex-brick h2"></div>
26				<div class="hex-brick h3"></div>
27			</div>
28			<div class="gel c5 r1">
29				<div class="hex-brick h1"></div>
30				<div class="hex-brick h2"></div>
31				<div class="hex-brick h3"></div>
32			</div>
33			<div class="gel c6 r1">
34				<div class="hex-brick h1"></div>
35				<div class="hex-brick h2"></div>
36				<div class="hex-brick h3"></div>
37			</div>
38			
39			<div class="gel c7 r2">
40				<div class="hex-brick h1"></div>
41				<div class="hex-brick h2"></div>
42				<div class="hex-brick h3"></div>
43			</div>
44			
45			<div class="gel c8 r2">
46				<div class="hex-brick h1"></div>
47				<div class="hex-brick h2"></div>
48				<div class="hex-brick h3"></div>
49			</div>
50			<div class="gel c9 r2">
51				<div class="hex-brick h1"></div>
52				<div class="hex-brick h2"></div>
53				<div class="hex-brick h3"></div>
54			</div>
55			<div class="gel c10 r2">
56				<div class="hex-brick h1"></div>
57				<div class="hex-brick h2"></div>
58				<div class="hex-brick h3"></div>
59			</div>
60			<div class="gel c11 r2">
61				<div class="hex-brick h1"></div>
62				<div class="hex-brick h2"></div>
63				<div class="hex-brick h3"></div>
64			</div>
65			<div class="gel c12 r2">
66				<div class="hex-brick h1"></div>
67				<div class="hex-brick h2"></div>
68				<div class="hex-brick h3"></div>
69			</div>
70			<div class="gel c13 r2">
71				<div class="hex-brick h1"></div>
72				<div class="hex-brick h2"></div>
73				<div class="hex-brick h3"></div>
74			</div>
75			<div class="gel c14 r2">
76				<div class="hex-brick h1"></div>
77				<div class="hex-brick h2"></div>
78				<div class="hex-brick h3"></div>
79			</div>
80			<div class="gel c15 r2">
81				<div class="hex-brick h1"></div>
82				<div class="hex-brick h2"></div>
83				<div class="hex-brick h3"></div>
84			</div>
85			<div class="gel c16 r2">
86				<div class="hex-brick h1"></div>
87				<div class="hex-brick h2"></div>
88				<div class="hex-brick h3"></div>
89			</div>
90			<div class="gel c17 r2">
91				<div class="hex-brick h1"></div>
92				<div class="hex-brick h2"></div>
93				<div class="hex-brick h3"></div>
94			</div>
95			<div class="gel c18 r2">
96				<div class="hex-brick h1"></div>
97				<div class="hex-brick h2"></div>
98				<div class="hex-brick h3"></div>
99			</div>
100			<div class="gel c19 r3">
101				<div class="hex-brick h1"></div>
102				<div class="hex-brick h2"></div>
103				<div class="hex-brick h3"></div>
104			</div>
105			<div class="gel c20 r3">
106				<div class="hex-brick h1"></div>
107				<div class="hex-brick h2"></div>
108				<div class="hex-brick h3"></div>
109			</div>
110			<div class="gel c21 r3">
111				<div class="hex-brick h1"></div>
112				<div class="hex-brick h2"></div>
113				<div class="hex-brick h3"></div>
114			</div>
115			<div class="gel c22 r3">
116				<div class="hex-brick h1"></div>
117				<div class="hex-brick h2"></div>
118				<div class="hex-brick h3"></div>
119			</div>
120			<div class="gel c23 r3">
121				<div class="hex-brick h1"></div>
122				<div class="hex-brick h2"></div>
123				<div class="hex-brick h3"></div>
124			</div>
125			<div class="gel c24 r3">
126				<div class="hex-brick h1"></div>
127				<div class="hex-brick h2"></div>
128				<div class="hex-brick h3"></div>
129			</div>
130			<div class="gel c25 r3">
131				<div class="hex-brick h1"></div>
132				<div class="hex-brick h2"></div>
133				<div class="hex-brick h3"></div>
134			</div>
135			<div class="gel c26 r3">
136				<div class="hex-brick h1"></div>
137				<div class="hex-brick h2"></div>
138				<div class="hex-brick h3"></div>
139			</div>
140			<div class="gel c28 r3">
141				<div class="hex-brick h1"></div>
142				<div class="hex-brick h2"></div>
143				<div class="hex-brick h3"></div>
144			</div>
145			<div class="gel c29 r3">
146				<div class="hex-brick h1"></div>
147				<div class="hex-brick h2"></div>
148				<div class="hex-brick h3"></div>
149			</div>
150			<div class="gel c30 r3">
151				<div class="hex-brick h1"></div>
152				<div class="hex-brick h2"></div>
153				<div class="hex-brick h3"></div>
154			</div>
155			<div class="gel c31 r3">
156				<div class="hex-brick h1"></div>
157				<div class="hex-brick h2"></div>
158				<div class="hex-brick h3"></div>
159			</div>
160			<div class="gel c32 r3">
161				<div class="hex-brick h1"></div>
162				<div class="hex-brick h2"></div>
163				<div class="hex-brick h3"></div>
164			</div>
165			<div class="gel c33 r3">
166				<div class="hex-brick h1"></div>
167				<div class="hex-brick h2"></div>
168				<div class="hex-brick h3"></div>
169			</div>
170			<div class="gel c34 r3">
171				<div class="hex-brick h1"></div>
172				<div class="hex-brick h2"></div>
173				<div class="hex-brick h3"></div>
174			</div>
175			<div class="gel c35 r3">
176				<div class="hex-brick h1"></div>
177				<div class="hex-brick h2"></div>
178				<div class="hex-brick h3"></div>
179			</div>
180			<div class="gel c36 r3">
181				<div class="hex-brick h1"></div>
182				<div class="hex-brick h2"></div>
183				<div class="hex-brick h3"></div>
184			</div>
185			<div class="gel c37 r3">
186				<div class="hex-brick h1"></div>
187				<div class="hex-brick h2"></div>
188				<div class="hex-brick h3"></div>
189			</div>
190			
191		</div>
192	</body>