animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Loaders (WIP)

model output

LLaMA 4 Scout

Loaders (WIP)

A 0.75T 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>Loading Animation</title>
7    <style>
8        body {
9            background-color: #ff3737; /* Red background */
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15            overflow: hidden;
16        }
17        .loader {
18            position: relative;
19            width: 50px;
20            height: 50px;
21        }
22        .loader::before, .loader::after {
23            content: "";
24            position: absolute;
25            top: 50%;
26            left: 50%;
27            transform-origin: top left;
28            border-radius: 50px;
29            border: 2px solid white;
30        }
31        .loader::before {
32            width: 25px;
33            height: 25px;
34            border-top-color: transparent;
35            border-left-color: transparent;
36            border-right-color: white;
37            animation: rotate1 2s linear infinite;
38        }
39        .loader::after {
40            width: 50px;
41            height: 50px;
42            border-top-color: transparent;
43            border-left-color: transparent;
44            border-right-color: white;
45            animation: rotate2 2s linear infinite;
46        }
47        @keyframes rotate1 {
48            0% {
49                transform: translate(-50%, -50%) rotate(0deg);
50            }
51            100% {
52                transform: translate(-50%, -50%) rotate(360deg);
53            }
54        }
55        @keyframes rotate2 {
56            0% {
57                transform: translate(-50%, -50%) rotate(0deg);
58            }
59            100% {
60                transform: translate(-50%, -50%) rotate(-360deg);
61            }
62        }
63    </style>
64</head>
65<body>
66    <div class="loader"></div>
67</body>
68</html>