← back to flat loading animatecompare with ground truth →
model output
LLaMA 4 Scout
flat loading animate
A 0.88T 0.14
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 .loader {
9 display: flex;
10 justify-content: center;
11 align-items: center;
12 height: 100vh;
13 background-color: #fff;
14 }
15 .dot {
16 width: 10px;
17 height: 10px;
18 border-radius: 50%;
19 background-color: #00b5b5;
20 margin: 0 5px;
21 animation: fadeOut 2s infinite;
22 }
23 .dot:nth-child(1) {
24 animation-delay: 0s;
25 }
26 .dot:nth-child(2) {
27 animation-delay: 0.5s;
28 }
29 .dot:nth-child(3) {
30 animation-delay: 1s;
31 }
32 @keyframes fadeOut {
33 0% {
34 opacity: 1;
35 transform: scale(1);
36 }
37 50% {
38 opacity: 1;
39 transform: scale(1);
40 }
41 100% {
42 opacity: 0;
43 transform: scale(0.5);
44 }
45 }
46 </style>
47</head>
48<body>
49 <div class="loader">
50 <span class="dot"></span>
51 <span class="dot"></span>
52 <span class="dot"></span>
53 </div>
54</body>
55</html>