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

model output

LLaMA 4 Scout

flat loading animate

A 0.88T 0.14
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        .loader {
9            display: flex;
10            justify-content: center;
11            align-items: center;
12            height: 100vh;
13            background-color: #fff;
14        }
15        .dot {
16            width: 10px;
17            height: 10px;
18            border-radius: 50%;
19            background-color: #00b5b5;
20            margin: 0 5px;
21            animation: fadeOut 2s infinite;
22        }
23        .dot:nth-child(1) {
24            animation-delay: 0s;
25        }
26        .dot:nth-child(2) {
27            animation-delay: 0.5s;
28        }
29        .dot:nth-child(3) {
30            animation-delay: 1s;
31        }
32        @keyframes fadeOut {
33            0% {
34                opacity: 1;
35                transform: scale(1);
36            }
37            50% {
38                opacity: 1;
39                transform: scale(1);
40            }
41            100% {
42                opacity: 0;
43                transform: scale(0.5);
44            }
45        }
46    </style>
47</head>
48<body>
49    <div class="loader">
50        <span class="dot"></span>
51        <span class="dot"></span>
52        <span class="dot"></span>
53    </div>
54</body>
55</html>