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

rendered animation

SVG "Foursquare-Inspired" Loading Spinner

1<div class="spinner">
2<svg width="100px" height="100px" viewBox="-26 -26 100 100" class="spinner_svg">
3    <defs></defs>
4    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5        <g id="Group" transform="translate(2.000000, 2.000000)" stroke="#FFFFFF">
6            <circle id="Oval-1" stroke-width="4" cx="22.5" cy="22.5" r="22.5"></circle>
7            <circle id="Oval-2" cx="22.5" cy="22.5" r="22.5" stroke-width="1.5"></circle>
8            <circle id="Oval-3" cx="22.5" cy="22.5" r="22.5" stroke-width="1.5"></circle>
9            <circle id="Oval-4" cx="22.5" cy="22.5" r="22.5" stroke-width="1.5"></circle>
10        </g>
11    </g>
12</svg>
13</div>