← back to CSS3 loading animationscompare with ground truth →
model output
LLaMA 4 Scout
CSS3 loading animations
A 0.63T 0.37
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: #000;
10 }
11 .loader {
12 position: absolute;
13 top: 50%;
14 left: 50%;
15 transform: translate(-50%, -50%);
16 width: 50px;
17 height: 50px;
18 border-radius: 50%;
19 border: 2px solid #0f0;
20 border-top: 2px solid transparent;
21 border-bottom: 2px solid transparent;
22 animation: spin 1s linear infinite;
23 }
24 @keyframes spin {
25 0% {
26 transform: translate(-50%, -50%) rotate(0deg);
27 }
28 100% {
29 transform: translate(-50%, -50%) rotate(360deg);
30 }
31 }
32 </style>
33</head>
34<body>
35 <div class="loader"></div>
36</body>
37</html>