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