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

model output

LLaMA 4 Scout

Wavy Loading Animations

A 0.69T 0.15
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        .loading {
9            position: relative;
10            width: 100px;
11            height: 20px;
12            background-color: #ffffff;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16        }
17
18        .dot {
19            position: relative;
20            width: 5px;
21            height: 5px;
22            border-radius: 50%;
23            background-color: #000000;
24            animation: loading 1.5s infinite;
25        }
26
27        .dot:nth-child(1) {
28            animation-delay: 0s;
29        }
30
31        .dot:nth-child(2) {
32            animation-delay: 0.2s;
33        }
34
35        .dot:nth-child(3) {
36            animation-delay: 0.4s;
37        }
38
39        .dot:nth-child(4) {
40            animation-delay: 0.6s;
41        }
42
43        .dot:nth-child(5) {
44            animation-delay: 0.8s;
45        }
46
47        .dot:nth-child(6) {
48            animation-delay: 1s;
49        }
50
51        @keyframes loading {
52            0% {
53                transform: scale(1);
54            }
55            50% {
56                transform: scale(1.2);
57            }
58            100% {
59                transform: scale(1);
60            }
61        }
62    </style>
63</head>
64<body>
65    <div class="loading">
66        <span class="dot"></span>
67        <span class="dot"></span>
68        <span class="dot"></span>
69        <span class="dot"></span>
70        <span class="dot"></span>
71        <span class="dot"></span>
72    </div>
73</body>
74</html>