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

model output

LLaMA 4 Scout

Simple loading indicators

A 0.64T 0.26
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>Dot Animation</title>
7    <style>
8        .dot {
9            position: absolute;
10            top: 10px;
11            left: 10px;
12            width: 20px;
13            height: 20px;
14            border-radius: 50%;
15            background-color: grey;
16            animation: change-color 8s infinite;
17        }
18
19        @keyframes change-color {
20            0% {
21                background-color: grey;
22            }
23            12.5% {
24                background-color: green;
25                clip-path: polygon(50% 0%, 100% 50%, 50% 100%);
26            }
27            25% {
28                background-color: green;
29            }
30            37.5% {
31                background-color: green;
32                clip-path: polygon(0% 50%, 50% 100%, 100% 50%);
33            }
34            50% {
35                background-color: grey;
36            }
37            62.5% {
38                background-color: grey;
39            }
40            75% {
41                background-color: grey;
42            }
43            87.5% {
44                background-color: grey;
45            }
46            100% {
47                background-color: grey;
48            }
49        }
50    </style>
51</head>
52<body>
53    <div class="dot"></div>
54</body>
55</html>