animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Loading Text (real PURE CSS)

model output

LLaMA 4 Scout

Loading Text (real PURE CSS)

A 0.74T 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        body {
9            background-color: black;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15            font-family: Arial, sans-serif;
16        }
17        .loading-text {
18            color: red;
19            font-size: 24px;
20            position: relative;
21        }
22        .loading-text::before {
23            content: attr(data-text);
24            position: absolute;
25            top: 0;
26            left: 0;
27            color: black;
28            clip-path: inset(0 0 0 0);
29            animation: loading 2s infinite;
30        }
31        @keyframes loading {
32            0% {
33                clip-path: inset(0 100% 0 0);
34            }
35            100% {
36                clip-path: inset(0 0 0 0);
37            }
38        }
39    </style>
40</head>
41<body>
42    <div class="loading-text" data-text="LOADING...">LOADING...</div>
43</body>
44</html>