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

model output

Claude Sonnet 4.6

CSS Spinners

A 0.85T 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: white;
16  }
17
18  .header {
19    width: 100%;
20    height: 245px;
21    background-color: #4a23a0;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25    position: relative;
26  }
27
28  .spinner {
29    width: 40px;
30    height: 40px;
31    border: 3px solid transparent;
32    border-top-color: rgba(180, 160, 220, 0.7);
33    border-bottom-color: rgba(180, 160, 220, 0.7);
34    border-radius: 50%;
35    animation: spin 1s linear infinite;
36  }
37
38  @keyframes spin {
39    0% {
40      transform: rotate(0deg);
41    }
42    100% {
43      transform: rotate(360deg);
44    }
45  }
46</style>
47</head>
48<body>
49  <div class="header">
50    <div class="spinner"></div>
51  </div>
52</body>
53</html>