← back to CSS3 loading animationscompare with ground truth →
model output
LLaMA 4 Scout
CSS3 loading animations
A 0.55T 0.28
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 }
16 .loader {
17 display: flex;
18 gap: 2px;
19 }
20 .loader div {
21 width: 10px;
22 height: 10px;
23 background-color: #34C759;
24 border-radius: 50%;
25 animation: loading 1.5s infinite;
26 }
27 .loader div:nth-child(1) {
28 animation-delay: 0s;
29 }
30 .loader div:nth-child(2) {
31 animation-delay: 0.2s;
32 }
33 .loader div:nth-child(3) {
34 animation-delay: 0.4s;
35 }
36 .loader div:nth-child(4) {
37 animation-delay: 0.6s;
38 }
39 .loader div:nth-child(5) {
40 animation-delay: 0.8s;
41 }
42 @keyframes loading {
43 0% {
44 transform: scale(1);
45 }
46 50% {
47 transform: scale(1.5);
48 }
49 100% {
50 transform: scale(1);
51 }
52 }
53 </style>
54</head>
55<body>
56 <div class="loader">
57 <div></div>
58 <div></div>
59 <div></div>
60 <div></div>
61 <div></div>
62 </div>
63</body>
64</html>