← back to Wavy Loading Animationscompare with ground truth →
model output
LLaMA 4 Scout
Wavy Loading Animations
A 0.69T 0.15
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 .loading {
9 position: relative;
10 width: 100px;
11 height: 20px;
12 background-color: #ffffff;
13 display: flex;
14 justify-content: center;
15 align-items: center;
16 }
17
18 .dot {
19 position: relative;
20 width: 5px;
21 height: 5px;
22 border-radius: 50%;
23 background-color: #000000;
24 animation: loading 1.5s infinite;
25 }
26
27 .dot:nth-child(1) {
28 animation-delay: 0s;
29 }
30
31 .dot:nth-child(2) {
32 animation-delay: 0.2s;
33 }
34
35 .dot:nth-child(3) {
36 animation-delay: 0.4s;
37 }
38
39 .dot:nth-child(4) {
40 animation-delay: 0.6s;
41 }
42
43 .dot:nth-child(5) {
44 animation-delay: 0.8s;
45 }
46
47 .dot:nth-child(6) {
48 animation-delay: 1s;
49 }
50
51 @keyframes loading {
52 0% {
53 transform: scale(1);
54 }
55 50% {
56 transform: scale(1.2);
57 }
58 100% {
59 transform: scale(1);
60 }
61 }
62 </style>
63</head>
64<body>
65 <div class="loading">
66 <span class="dot"></span>
67 <span class="dot"></span>
68 <span class="dot"></span>
69 <span class="dot"></span>
70 <span class="dot"></span>
71 <span class="dot"></span>
72 </div>
73</body>
74</html>