← back to Simple loading indicatorscompare with ground truth →
model output
LLaMA 4 Scout
Simple loading indicators
A 0.64T 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>Dot Animation</title>
7 <style>
8 .dot {
9 position: absolute;
10 top: 10px;
11 left: 10px;
12 width: 20px;
13 height: 20px;
14 border-radius: 50%;
15 background-color: grey;
16 animation: change-color 8s infinite;
17 }
18
19 @keyframes change-color {
20 0% {
21 background-color: grey;
22 }
23 12.5% {
24 background-color: green;
25 clip-path: polygon(50% 0%, 100% 50%, 50% 100%);
26 }
27 25% {
28 background-color: green;
29 }
30 37.5% {
31 background-color: green;
32 clip-path: polygon(0% 50%, 50% 100%, 100% 50%);
33 }
34 50% {
35 background-color: grey;
36 }
37 62.5% {
38 background-color: grey;
39 }
40 75% {
41 background-color: grey;
42 }
43 87.5% {
44 background-color: grey;
45 }
46 100% {
47 background-color: grey;
48 }
49 }
50 </style>
51</head>
52<body>
53 <div class="dot"></div>
54</body>
55</html>