← back to Animated Dot Loaderscompare with ground truth →
model output
Claude Sonnet 4.6
Animated Dot Loaders
A 0.76T 0.24
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 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 background: #0d0b18;
12 width: 100vw;
13 height: 100vh;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 overflow: hidden;
18 }
19
20 .bg-glow {
21 position: absolute;
22 width: 300px;
23 height: 300px;
24 border-radius: 50%;
25 background: radial-gradient(circle, rgba(60,20,100,0.5) 0%, rgba(30,10,60,0.3) 50%, transparent 70%);
26 animation: glowPulse 3s ease-in-out infinite;
27 }
28
29 @keyframes glowPulse {
30 0%, 100% { opacity: 0.7; transform: scale(1); }
31 50% { opacity: 1; transform: scale(1.1); }
32 }
33
34 .ring {
35 position: absolute;
36 width: 260px;
37 height: 260px;
38 border-radius: 50%;
39 border: 1px solid rgba(80, 40, 120, 0.3);
40 animation: ringFade 3s ease-in-out infinite;
41 }
42
43 @keyframes ringFade {
44 0%, 100% { opacity: 0.6; }
45 50% { opacity: 0; }
46 }
47
48 .dots-container {
49 position: relative;
50 display: flex;
51 align-items: center;
52 justify-content: center;
53 gap: 0px;
54 }
55
56 .dot {
57 width: 12px;
58 height: 12px;
59 border-radius: 50%;
60 background: #b0a8c8;
61 position: absolute;
62 transform-origin: center;
63 }
64
65 .dot-1 { animation: dot1 3s ease-in-out infinite; }
66 .dot-2 { animation: dot2 3s ease-in-out infinite; }
67 .dot-3 { animation: dot3 3s ease-in-out infinite; }
68 .dot-4 { animation: dot4 3s ease-in-out infinite; }
69 .dot-5 { animation: dot5 3s ease-in-out infinite; }
70
71 @keyframes dot1 {
72 0% { transform: translateX(-60px); opacity: 0.7; width: 12px; height: 12px; background: #b0a8c8; }
73 30% { transform: translateX(-30px); opacity: 0.6; width: 12px; height: 12px; }
74 50% { transform: translateX(0px); opacity: 0; width: 8px; height: 8px; }
75 70% { transform: translateX(-30px); opacity: 0.6; width: 12px; height: 12px; }
76 100% { transform: translateX(-60px); opacity: 0.7; width: 12px; height: 12px; background: #b0a8c8; }
77 }
78
79 @keyframes dot2 {
80 0% { transform: translateX(-30px); opacity: 0.75; width: 12px; height: 12px; background: #b0a8c8; }
81 35% { transform: translateX(-10px); opacity: 0.7; width: 12px; height: 12px; }
82 50% { transform: translateX(0px); opacity: 0.5; width: 10px; height: 10px; }
83 65% { transform: translateX(-10px); opacity: 0.7; width: 12px; height: 12px; }
84 100% { transform: translateX(-30px); opacity: 0.75; width: 12px; height: 12px; background: #b0a8c8; }
85 }
86
87 @keyframes dot3 {
88 0% { transform: translateX(0px); opacity: 0.8; width: 13px; height: 13px; background: #d0cce0; }
89 50% { transform: translateX(0px); opacity: 1; width: 14px; height: 14px; background: #ffffff; box-shadow: 0 0 15px 5px rgba(200,180,255,0.8); }
90 100% { transform: translateX(0px); opacity: 0.8; width: 13px; height: 13px; background: #d0cce0; }
91 }
92
93 @keyframes dot4 {
94 0% { transform: translateX(30px); opacity: 0.75; width: 12px; height: 12px; background: #b0a8c8; }
95 35% { transform: translateX(10px); opacity: 0.7; width: 12px; height: 12px; }
96 50% { transform: translateX(0px); opacity: 0.5; width: 10px; height: 10px; }
97 65% { transform: translateX(10px); opacity: 0.7; width: 12px; height: 12px; }
98 100% { transform: translateX(30px); opacity: 0.75; width: 12px; height: 12px; background: #b0a8c8; }
99 }
100
101 @keyframes dot5 {
102 0% { transform: translateX(60px); opacity: 0.7; width: 12px; height: 12px; background: #b0a8c8; }
103 30% { transform: translateX(30px); opacity: 0.6; width: 12px; height: 12px; }
104 50% { transform: translateX(0px); opacity: 0; width: 8px; height: 8px; }
105 70% { transform: translateX(30px); opacity: 0.6; width: 12px; height: 12px; }
106 100% { transform: translateX(60px); opacity: 0.7; width: 12px; height: 12px; background: #b0a8c8; }
107 }
108</style>
109</head>
110<body>
111 <div class="bg-glow"></div>
112 <div class="ring"></div>
113 <div class="dots-container">
114 <div class="dot dot-1"></div>
115 <div class="dot dot-2"></div>
116 <div class="dot dot-3"></div>
117 <div class="dot dot-4"></div>
118 <div class="dot dot-5"></div>
119 </div>
120</body>
121</html>