← back to Simple Spinnercompare with ground truth →
model output
LLaMA 4 Scout
Simple Spinner
A 0.75T 0.22
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: #FFC107;
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: 100px;
19 height: 100px;
20 }
21 .loader::before {
22 content: "";
23 position: absolute;
24 top: 50%;
25 left: 50%;
26 transform: translate(-50%, -50%);
27 width: 100%;
28 height: 100%;
29 border-radius: 50%;
30 border: 2px solid #FFFFFF;
31 border-color: #FFFFFF transparent transparent transparent;
32 animation: rotate 2s linear infinite;
33 }
34 @keyframes rotate {
35 0% {
36 transform: translate(-50%, -50%) rotate(0deg);
37 }
38 100% {
39 transform: translate(-50%, -50%) rotate(360deg);
40 }
41 }
42 .loader::after {
43 content: "";
44 position: absolute;
45 top: 50%;
46 left: 50%;
47 transform: translate(-50%, -50%);
48 width: 80%;
49 height: 80%;
50 border-radius: 50%;
51 border: 2px solid #FF0000;
52 border-color: #FF0000 transparent transparent transparent;
53 animation: fill 2s ease-out infinite;
54 }
55 @keyframes fill {
56 0% {
57 width: 0;
58 transform: translate(-50%, -50%) rotate(0deg);
59 }
60 100% {
61 width: 100%;
62 transform: translate(-50%, -50%) rotate(360deg);
63 }
64 }
65 </style>
66</head>
67<body>
68 <div class="loader"></div>
69</body>
70</html>