← back to CSS3 loading animationscompare with ground truth →
model output
LLaMA 4 Scout
CSS3 loading animations
A 0.54T 0.31
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 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .dot {
17 width: 10px;
18 height: 10px;
19 border-radius: 50%;
20 background-color: #00ff00;
21 display: inline-block;
22 animation: pulse 1.5s infinite;
23 }
24 .dot:nth-child(1) {
25 animation-delay: 0s;
26 }
27 .dot:nth-child(2) {
28 animation-delay: 0.2s;
29 }
30 .dot:nth-child(3) {
31 animation-delay: 0.4s;
32 }
33 .dot:nth-child(4) {
34 animation-delay: 0.6s;
35 }
36 .dot:nth-child(5) {
37 animation-delay: 0.8s;
38 }
39 @keyframes pulse {
40 0% {
41 transform: scale(1);
42 }
43 50% {
44 transform: scale(1.2);
45 }
46 100% {
47 transform: scale(1);
48 }
49 }
50 </style>
51</head>
52<body>
53 <span class="dot"></span>
54 <span class="dot"></span>
55 <span class="dot"></span>
56 <span class="dot"></span>
57 <span class="dot"></span>
58</body>
59</html>