← back to Wavy Loading Animationscompare with ground truth →
model output
LLaMA 4 Scout
Wavy Loading Animations
A 0.64T 0.21
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>Animation</title>
7 <style>
8 body {
9 background-color: #fff;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .triangle {
17 width: 0;
18 height: 0;
19 border-style: solid;
20 border-width: 0 0 10px 20px;
21 border-color: transparent transparent #333 transparent;
22 }
23 .animate {
24 animation: move 5s infinite;
25 }
26 @keyframes move {
27 0% {
28 transform: translateX(0);
29 }
30 100% {
31 transform: translateX(200px);
32 }
33 }
34 </style>
35</head>
36<body>
37 <div class="triangle animate"></div>
38</body>
39</html>