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

rendered animation

WebApp Loader

1<div class="loader">
2  		<div class="loader-overlay hidden"></div>
3	  	<div id="loader-logo">
4			<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150px" height="150px" viewBox="-35 -55 150 200">
5
6				<path class="loader-logoBackground" fill="#CC6060" d="M34.7,70.9c-13.1,0-24.5-7-30.8-17.4C11.6,79.9,34.7,117,34.7,117s23.1-37.2,30.8-63.5
7					C59.3,63.9,47.8,70.9,34.7,70.9z"/>
8
9				<g class="loader-logoDonut">
10					<path fill="#CC6060" d="M41.6,18.8c4.2,1.8,7.6,5.1,9.3,9.3L66.8,26c-3.1-11.1-11.9-19.9-23-23L41.6,18.8z"/>
11					<path fill="#CC6060" d="M50.9,41.8c-1.8,4.2-5.2,7.6-9.4,9.4L43.7,67C54.8,63.9,63.6,55.1,66.8,44L50.9,41.8z"/>
12					<g>
13						<path fill="#CC6060" d="M18.5,28.2c1.8-4.2,5.1-7.6,9.3-9.4L25.7,3C14.6,6.1,5.8,14.9,2.7,26L18.5,28.2z"/>
14						<path fill="#CC6060" d="M18.5,41.8L2.7,44c3.1,11.1,11.9,19.9,23.1,23l2.1-15.8C23.7,49.4,20.3,46.1,18.5,41.8z"/>
15					</g>
16					<path opacity="7.000000e-02" fill="#202021" d="M34.7,10.3C21.1,10.3,10,21.3,10,35s11.1,24.8,24.8,24.8c13.7,0,24.8-11.1,24.8-24.8
17					S48.4,10.3,34.7,10.3z M34.7,52.6c-9.7,0-17.6-7.9-17.6-17.6S25,17.4,34.7,17.4S52.3,25.3,52.3,35S44.4,52.6,34.7,52.6z"/>
18				</g>
19			</svg>
20		</div>
21
22		<div id="loader-pitch">
23			<h1>Welcome to your night-out planner.</h1>
24			<h3>Fetching parties...</h3>
25		</div>
26	</div>