← back to Loaders (WIP)compare with ground truth →
model output
LLaMA 4 Scout
Loaders (WIP)
A 0.74T 0.26
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: #ff3737;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 padding: 0;
16 }
17 .loader {
18 position: relative;
19 }
20 .dot {
21 position: absolute;
22 top: 50%;
23 left: 50%;
24 transform: translate(-50%, -50%);
25 width: 10px;
26 height: 10px;
27 border-radius: 50%;
28 background-color: white;
29 opacity: 1;
30 }
31 .dot:nth-child(1) {
32 animation: fadeOut 0.5s ease-out 0s forwards;
33 }
34 .dot:nth-child(2) {
35 animation: fadeOut 0.5s ease-out 0.5s forwards;
36 }
37 .dot:nth-child(3) {
38 animation: fadeOut 0.5s ease-out 1s forwards;
39 }
40 @keyframes fadeOut {
41 0% {
42 opacity: 1;
43 transform: translate(-50%, -50%) scale(1);
44 }
45 100% {
46 opacity: 0;
47 transform: translate(-50%, -50%) scale(0.5);
48 }
49 }
50 .loader:after {
51 content: "";
52 position: absolute;
53 top: 50%;
54 left: 50%;
55 transform: translate(-50%, -50%);
56 width: 10px;
57 height: 10px;
58 border-radius: 50%;
59 background-color: white;
60 animation: appear 1s ease-out 1.5s forwards;
61 }
62 @keyframes appear {
63 0% {
64 opacity: 0;
65 transform: translate(-50%, -50%) scale(0.5);
66 }
67 100% {
68 opacity: 1;
69 transform: translate(-50%, -50%) scale(1);
70 }
71 }
72 </style>
73</head>
74<body>
75 <div class="loader">
76 <div class="dot"></div>
77 <div class="dot"></div>
78 <div class="dot"></div>
79 </div>
80</body>
81</html>