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

rendered animation

Motion preloader 2015

1	<div class="wrapper">
2		<div class="container">
3			<div class="block-cont">
4				<div class="block shadow">
5					<div class="square">
6						<div class="lines">
7							<span></span>
8							<span></span>
9						</div>
10					</div>
11					<div class="line"></div>
12					<div class="half-circle">
13						<div class="circle">
14							<div class="circle-min"></div>
15						</div>
16						<div class="cutter"></div>
17					</div>
18				</div>
19				<div class="block">
20					<div class="square">
21						<div class="lines">
22							<span></span>
23							<span></span>
24						</div>
25					</div>
26					<div class="pseudo-square"></div>
27					<div class="line"></div>
28					<div class="pseudo-line"></div>
29					<div class="half-circle">
30						<div class="circle">
31							<div class="circle-min"></div>
32						</div>
33						<div class="cutter"></div>
34					</div>
35				</div>
36			</div>
37			<div class="block-cont">
38				<div class="block shadow">
39					<div class="square">
40						<div class="lines">
41							<span></span>
42							<span></span>
43						</div>
44					</div>
45					<div class="line"></div>
46					<div class="half-circle">
47						<div class="circle">
48							<div class="circle-min"></div>
49						</div>
50						<div class="cutter"></div>
51					</div>
52				</div>
53				<div class="block">
54					<div class="square">
55						<div class="lines">
56							<span></span>
57							<span></span>
58						</div>
59					</div>
60					<div class="pseudo-square"></div>
61					<div class="line"></div>
62					<div class="pseudo-line"></div>
63					<div class="half-circle">
64						<div class="circle">
65							<div class="circle-min"></div>
66						</div>
67						<div class="cutter"></div>
68					</div>
69				</div>
70			</div>
71			<div class="block-cont">
72				<div class="block shadow">
73					<div class="square">
74						<div class="lines">
75							<span></span>
76							<span></span>
77						</div>
78					</div>
79					<div class="line"></div>
80					<div class="half-circle">
81						<div class="circle">
82							<div class="circle-min"></div>
83						</div>
84						<div class="cutter"></div>
85					</div>
86				</div>
87				<div class="block">
88					<div class="square">
89						<div class="lines">
90							<span></span>
91							<span></span>
92						</div>
93					</div>
94					<div class="pseudo-square"></div>
95					<div class="line"></div>
96					<div class="pseudo-line"></div>
97					<div class="half-circle">
98						<div class="circle">
99							<div class="circle-min"></div>
100						</div>
101						<div class="cutter"></div>
102					</div>
103				</div>
104			</div>
105			<div class="block-cont">
106				<div class="block shadow">
107					<div class="square">
108						<div class="lines">
109							<span></span>
110							<span></span>
111						</div>
112					</div>
113					<div class="line"></div>
114					<div class="half-circle">
115						<div class="circle">
116							<div class="circle-min"></div>
117						</div>
118						<div class="cutter"></div>
119					</div>
120				</div>
121				<div class="block">
122					<div class="square">
123						<div class="lines">
124							<span></span>
125							<span></span>
126						</div>
127					</div>
128					<div class="pseudo-square"></div>
129					<div class="line"></div>
130					<div class="pseudo-line"></div>
131					<div class="half-circle">
132						<div class="circle">
133							<div class="circle-min"></div>
134						</div>
135						<div class="cutter"></div>
136					</div>
137				</div>
138			</div>
139		</div>
140	</div>