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

model output

Claude Sonnet 4.6

Simple Spinner

A 0.93T 0.31
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: #FFA500;
16    display: flex;
17    justify-content: center;
18    align-items: center;
19    width: 100vw;
20    height: 100vh;
21    overflow: hidden;
22  }
23
24  .loader {
25    position: relative;
26    width: 40px;
27    height: 40px;
28  }
29
30  .circle-bg {
31    position: absolute;
32    width: 40px;
33    height: 40px;
34    border-radius: 50%;
35    border: 3px solid rgba(255, 255, 240, 0.7);
36    border-color: rgba(255, 255, 240, 0.7);
37  }
38
39  .circle-red {
40    position: absolute;
41    width: 40px;
42    height: 40px;
43    border-radius: 50%;
44    border: 3px solid transparent;
45    border-top-color: #e00;
46    border-right-color: transparent;
47    border-bottom-color: transparent;
48    border-left-color: transparent;
49    animation: spin 1s linear infinite;
50  }
51
52  @keyframes spin {
53    0% {
54      transform: rotate(0deg);
55    }
56    100% {
57      transform: rotate(360deg);
58    }
59  }
60</style>
61</head>
62<body>
63  <div class="loader">
64    <div class="circle-bg"></div>
65    <div class="circle-red"></div>
66  </div>
67</body>
68</html>