← back to Simple Spinnercompare with ground truth →
model output
LLaMA 4 Scout
Simple Spinner
A 0.74T 0.14
1<!DOCTYPE html>
2<html>
3<head>
4 <style>
5 body {
6 background-color: #000;
7 display: flex;
8 justify-content: center;
9 align-items: center;
10 height: 100vh;
11 margin: 0;
12 }
13 .circle {
14 position: relative;
15 width: 20px;
16 height: 20px;
17 border-radius: 50%;
18 animation: pulse 2s infinite;
19 }
20 @keyframes pulse {
21 0% {
22 opacity: 1;
23 border: 2px solid #03A9F4;
24 }
25 16.67% {
26 opacity: 1;
27 border: 2px solid #03A9F4;
28 }
29 33.33% {
30 opacity: 1;
31 border: 2px solid #8BC34A;
32 }
33 50% {
34 opacity: 1;
35 border: 2px solid #FF9800;
36 }
37 66.67% {
38 opacity: 1;
39 border: 2px solid #E91E63;
40 }
41 83.33% {
42 opacity: 1;
43 border: 2px solid #FFC107;
44 }
45 100% {
46 opacity: 1;
47 border: 2px solid #8BC34A;
48 }
49 }
50 .pulse-circle {
51 position: absolute;
52 top: 50%;
53 left: 50%;
54 transform: translate(-50%, -50%);
55 width: 10px;
56 height: 10px;
57 border-radius: 50%;
58 background-color: #fff;
59 animation: pulse-color 2s infinite;
60 }
61 @keyframes pulse-color {
62 0% {
63 background-color: #03A9F4;
64 box-shadow: 0 0 0 2px #03A9F4;
65 }
66 16.67% {
67 background-color: #03A9F4;
68 box-shadow: 0 0 0 2px #03A9F4;
69 }
70 33.33% {
71 background-color: #8BC34A;
72 box-shadow: 0 0 0 2px #8BC34A;
73 }
74 50% {
75 background-color: #FF9800;
76 box-shadow: 0 0 0 2px #FF9800;
77 }
78 66.67% {
79 background-color: #E91E63;
80 box-shadow: 0 0 0 2px #E91E63;
81 }
82 83.33% {
83 background-color: #FFC107;
84 box-shadow: 0 0 0 2px #FFC107;
85 }
86 100% {
87 background-color: #8BC34A;
88 box-shadow: 0 0 0 2px #8BC34A;
89 }
90 }
91 </style>
92</head>
93<body>
94 <div class="circle"></div>
95</body>
96</html>