← back to Thinking about SVG-preloaderscompare with ground truth →
model output
Gemini 3 Flash Preview
Thinking about SVG-preloaders
A 0.69T 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>Circular Loading Animation</title>
7 <style>
8 /* Base page styling to match the video's dark, textured aesthetic */
9 body {
10 margin: 0;
11 padding: 0;
12 height: 100vh;
13 display: flex;
14 justify-content: center;
15 align-items: center;
16 background-color: #000;
17 /* Subtle grid texture to mimic the background in the video */
18 background-image:
19 linear-gradient(rgba(20, 20, 20, 0.5) 1px, transparent 1px),
20 linear-gradient(90deg, rgba(20, 20, 20, 0.5) 1px, transparent 1px);
21 background-size: 15px 15px;
22 overflow: hidden;
23 }
24
25 /* The main container that handles the rotation */
26 .loader {
27 position: relative;
28 width: 100px;
29 height: 100px;
30 /* Based on video timestamps: full rotation approx every 2 seconds */
31 animation: rotate-clockwise 2s linear infinite;
32 }
33
34 /* Styling for the circular rings */
35 .dot {
36 position: absolute;
37 top: 50%;
38 left: 50%;
39 width: 16px;
40 height: 16px;
41 margin: -8px; /* Offset by half width/height to center precisely */
42 border-radius: 50%;
43 border-style: solid;
44 border-width: 3.5px;
45 box-sizing: border-box;
46 /* Slight glow effect to match the video's bloom */
47 box-shadow: 0 0 4px currentColor;
48 }
49
50 /* Keyframe for a smooth continuous rotation */
51 @keyframes rotate-clockwise {
52 from { transform: rotate(0deg); }
53 to { transform: rotate(360deg); }
54 }
55
56 /*
57 Manually positioning dots in a circle and applying the color gradient.
58 The "head" of the loader is dot-1 (Yellow).
59 The "tail" follows behind, decreasing in brightness and scale.
60 */
61
62 .dot:nth-child(1) {
63 transform: rotate(0deg) translateY(-40px);
64 color: #ffcf31; /* Bright yellow head */
65 scale: 1;
66 }
67 .dot:nth-child(2) {
68 transform: rotate(30deg) translateY(-40px);
69 color: #feb230;
70 scale: 0.98;
71 }
72 .dot:nth-child(3) {
73 transform: rotate(60deg) translateY(-40px);
74 color: #fe952f;
75 scale: 0.96;
76 }
77 .dot:nth-child(4) {
78 transform: rotate(90deg) translateY(-40px);
79 color: #fd782e;
80 scale: 0.94;
81 }
82 .dot:nth-child(5) {
83 transform: rotate(120deg) translateY(-40px);
84 color: #fd5b2d;
85 scale: 0.92;
86 }
87 .dot:nth-child(6) {
88 transform: rotate(150deg) translateY(-40px);
89 color: #db4427;
90 scale: 0.90;
91 }
92 .dot:nth-child(7) {
93 transform: rotate(180deg) translateY(-40px);
94 color: #b33221;
95 scale: 0.88;
96 }
97 .dot:nth-child(8) {
98 transform: rotate(210deg) translateY(-40px);
99 color: #8c211b;
100 scale: 0.86;
101 }
102 .dot:nth-child(9) {
103 transform: rotate(240deg) translateY(-40px);
104 color: #661315;
105 scale: 0.84;
106 }
107 .dot:nth-child(10) {
108 transform: rotate(270deg) translateY(-40px);
109 color: #420a10;
110 scale: 0.82;
111 }
112 .dot:nth-child(11) {
113 transform: rotate(300deg) translateY(-40px);
114 color: #25050a;
115 scale: 0.80;
116 }
117 .dot:nth-child(12) {
118 transform: rotate(330deg) translateY(-40px);
119 color: #120205;
120 scale: 0.78;
121 }
122
123 </style>
124</head>
125<body>
126
127 <!-- 12-dot loader structure -->
128 <div class="loader">
129 <div class="dot"></div>
130 <div class="dot"></div>
131 <div class="dot"></div>
132 <div class="dot"></div>
133 <div class="dot"></div>
134 <div class="dot"></div>
135 <div class="dot"></div>
136 <div class="dot"></div>
137 <div class="dot"></div>
138 <div class="dot"></div>
139 <div class="dot"></div>
140 <div class="dot"></div>
141 </div>
142
143</body>
144</html>