← back to flat loading animatecompare with ground truth →
model output
LLaMA 4 Scout
flat loading animate
A 0.85T 0.35
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 .ball {
9 position: absolute;
10 top: 50%;
11 transform: translateY(-50%);
12 border-radius: 50%;
13 width: 20px;
14 height: 20px;
15 }
16 #red {
17 background-color: red;
18 left: 50%;
19 animation: red-move 4s infinite;
20 }
21 #blue {
22 background-color: blue;
23 left: 50%;
24 animation: blue-move 4s infinite;
25 }
26 @keyframes red-move {
27 0% {
28 transform: translateX(-20px) translateY(-50%);
29 }
30 50% {
31 transform: translateX(20px) translateY(-50%);
32 }
33 100% {
34 transform: translateX(-20px) translateY(-50%);
35 }
36 }
37 @keyframes blue-move {
38 0% {
39 transform: translateX(20px) translateY(-50%);
40 }
41 50% {
42 transform: translateX(-20px) translateY(-50%);
43 }
44 100% {
45 transform: translateX(20px) translateY(-50%);
46 }
47 }
48 </style>
49</head>
50<body>
51 <div class="ball" id="red"></div>
52 <div class="ball" id="blue"></div>
53</body>
54</html>