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

model output

LLaMA 4 Scout

Apple Loading Bar

A 0.61T 0.22
compare with ground truth →
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Apple Logo Animation</title>
5    <style>
6        body {
7            background-color: #000;
8            display: flex;
9            justify-content: center;
10            align-items: center;
11            height: 100vh;
12            margin: 0;
13            overflow: hidden;
14        }
15        .apple-logo {
16            width: 200px;
17            height: 200px;
18            background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Apple_logo_white.svg/1024px-Apple_logo_white.svg.png');
19            background-size: contain;
20            background-position: center;
21            background-repeat: no-repeat;
22        }
23        .progress-bar {
24            width: 80%;
25            height: 5px;
26            background-color: #ccc;
27            margin-top: 20px;
28        }
29        .progress {
30            width: 0%;
31            height: 5px;
32            background-color: #fff;
33            transition: width 1s linear;
34        }
35    </style>
36</head>
37<body>
38    <div class="apple-logo"></div>
39    <div class="progress-bar">
40        <div class="progress"></div>
41    </div>
42
43    <script>
44        let progress = 0;
45        const progressBar = document.querySelector('.progress');
46        const interval = setInterval(() => {
47            progress += 1.5;
48            progressBar.style.width = `${progress}%`;
49            if (progress >= 100) {
50                clearInterval(interval);
51            }
52        }, 30);
53    </script>
54</body>
55</html>