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