← back to Loaders (WIP)compare with ground truth →
model output
LLaMA 4 Scout
Loaders (WIP)
A 0.75T 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; /* Red background */
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 overflow: hidden;
16 }
17 .loader {
18 position: relative;
19 width: 50px;
20 height: 50px;
21 }
22 .loader::before, .loader::after {
23 content: "";
24 position: absolute;
25 top: 50%;
26 left: 50%;
27 transform-origin: top left;
28 border-radius: 50px;
29 border: 2px solid white;
30 }
31 .loader::before {
32 width: 25px;
33 height: 25px;
34 border-top-color: transparent;
35 border-left-color: transparent;
36 border-right-color: white;
37 animation: rotate1 2s linear infinite;
38 }
39 .loader::after {
40 width: 50px;
41 height: 50px;
42 border-top-color: transparent;
43 border-left-color: transparent;
44 border-right-color: white;
45 animation: rotate2 2s linear infinite;
46 }
47 @keyframes rotate1 {
48 0% {
49 transform: translate(-50%, -50%) rotate(0deg);
50 }
51 100% {
52 transform: translate(-50%, -50%) rotate(360deg);
53 }
54 }
55 @keyframes rotate2 {
56 0% {
57 transform: translate(-50%, -50%) rotate(0deg);
58 }
59 100% {
60 transform: translate(-50%, -50%) rotate(-360deg);
61 }
62 }
63 </style>
64</head>
65<body>
66 <div class="loader"></div>
67</body>
68</html>