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

model output

Claude Sonnet 4.6

SVG Loading icons

A 0.88T 0.30
compare with ground truth →
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Loading Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #2e3c3f;
16    display: flex;
17    justify-content: center;
18    align-items: flex-start;
19    height: 100vh;
20    width: 100vw;
21  }
22
23  .loader {
24    width: 20px;
25    height: 20px;
26    border: 2px solid transparent;
27    border-top-color: #e8720c;
28    border-right-color: #e8720c;
29    border-radius: 50%;
30    position: absolute;
31    top: 35px;
32    left: 50%;
33    transform: translateX(-50%);
34    animation: spin 1s linear infinite;
35  }
36
37  @keyframes spin {
38    0% {
39      transform: translateX(-50%) rotate(0deg);
40    }
41    100% {
42      transform: translateX(-50%) rotate(360deg);
43    }
44  }
45</style>
46</head>
47<body>
48  <div class="loader"></div>
49</body>
50</html>