← back to Staggered Stair Loadingcompare with ground truth →
model output
LLaMA 4 Scout
Staggered Stair Loading
A 0.44T 0.19
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: #0000ff;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .loading {
17 position: relative;
18 width: 200px;
19 height: 30px;
20 background-color: #2f4f7f;
21 display: flex;
22 justify-content: center;
23 align-items: center;
24 color: #ffffff;
25 font-family: Arial, sans-serif;
26 }
27 .loading::before {
28 content: "";
29 position: absolute;
30 top: 0;
31 left: 0;
32 width: 100%;
33 height: 100%;
34 background-image: linear-gradient(to right, #2f4f7f 0%, #4f69c6 100%);
35 animation: loading 2s linear infinite;
36 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
37 }
38 @keyframes loading {
39 0% {
40 transform: translateX(-100%);
41 }
42 100% {
43 transform: translateX(100%);
44 }
45 }
46 </style>
47</head>
48<body>
49 <div class="loading">LOADING</div>
50</body>
51</html>