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

rendered animation

CSS-Animated SVG Spinner/Loader

1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
2  <g class="anim-0">
3    <circle cx="50" cy="50" r="50" fill="#ff5e7C" />
4  </g>
5  <g class="anim-1">
6    <circle cx="50" cy="50" r="5" fill="white" />
7  </g>
8  <g class="anim-2">
9    <circle cx="75" cy="50" r="5" fill="white" />
10    <line x1="25" y1="50" x2="75" y2="50" stroke="white" stroke-width="3" />
11  </g>
12  <g class="anim-3">
13    <circle cx="50" cy="25" r="5" fill="white" />
14    <line x1="50" y1="25" x2="25" y2="75" stroke="white" stroke-width="3" />
15    <line x1="50" y1="25" x2="75" y2="75" stroke="white" stroke-width="3" />
16  </g>
17  <g class="anim-4">
18    <circle cx="75" cy="25" r="5" fill="white" />
19    <line x1="75" y1="25" x2="25" y2="25" stroke="white" stroke-width="3" />
20  </g>
21</svg>