← back to flat loading animatecompare with ground truth →
model output
LLaMA 4 Scout
flat loading animate
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>Dot Animation</title>
7 <style>
8 body {
9 margin: 0;
10 background-color: #fff;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 height: 100vh;
15 }
16 .dot {
17 width: 20px;
18 height: 20px;
19 border-radius: 50%;
20 background-color: #ff3737;
21 position: relative;
22 }
23 .dot::before {
24 content: "";
25 position: absolute;
26 width: 100%;
27 height: 100%;
28 border-radius: 50%;
29 background-color: #fff;
30 clip-path: circle(50% at 50% 50%);
31 }
32 .animate {
33 animation: pulse 2s infinite;
34 }
35 @keyframes pulse {
36 0% {
37 transform: scale(1);
38 }
39 50% {
40 transform: scale(1.2);
41 }
42 100% {
43 transform: scale(1);
44 }
45 }
46 </style>
47</head>
48<body>
49 <div class="dot animate"></div>
50</body>
51</html>