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

model output

Claude Sonnet 4.6

Apple Loading Bar

A 0.70T 0.52
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>Apple Boot Screen</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: #0a0a0a;
12    display: flex;
13    flex-direction: column;
14    align-items: center;
15    justify-content: center;
16    height: 100vh;
17    overflow: hidden;
18  }
19
20  .apple-logo {
21    width: 120px;
22    height: 120px;
23    margin-bottom: 120px;
24  }
25
26  .apple-logo svg {
27    width: 100%;
28    height: 100%;
29    fill: white;
30  }
31
32  .progress-container {
33    position: absolute;
34    bottom: 22%;
35    width: 340px;
36    height: 3px;
37    background: #3a3a3a;
38    border-radius: 2px;
39    overflow: hidden;
40  }
41
42  .progress-bar {
43    height: 100%;
44    width: 0%;
45    background: #d0d0d0;
46    border-radius: 2px;
47    animation: progress 8s linear forwards;
48  }
49
50  @keyframes progress {
51    0%   { width: 0%; }
52    100% { width: 35%; }
53  }
54</style>
55</head>
56<body>
57
58<div class="apple-logo">
59  <svg viewBox="0 0 814 1000" xmlns="http://www.w3.org/2000/svg">
60    <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 790.7 0 663 0 541.8c0-207.5 135.4-317.3 269-317.3 70.1 0 128.4 46.4 172.5 46.4 42.8 0 109.6-49 192.5-49 30.9 0 111.2 2.6 168.7 74.4zm-234.5-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/>
61  </svg>
62</div>
63
64<div class="progress-container">
65  <div class="progress-bar"></div>
66</div>
67
68</body>
69</html>