← back to Thinking about SVG-preloaderscompare with ground truth →
model output
Gemini 3 Flash Preview
Thinking about SVG-preloaders
A 0.58T 0.34
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 /* Base page styling */
9 body {
10 margin: 0;
11 padding: 0;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 height: 100vh;
16 background-color: #000;
17 /* Subtle grid pattern matching the video background */
18 background-image:
19 linear-gradient(rgba(25, 25, 25, 0.5) 1px, transparent 1px),
20 linear-gradient(90deg, rgba(25, 25, 25, 0.5) 1px, transparent 1px);
21 background-size: 20px 20px;
22 overflow: hidden;
23 }
24
25 /* Spinner container */
26 .loader {
27 position: relative;
28 width: 80px;
29 height: 80px;
30 }
31
32 /* Individual dots */
33 .dot {
34 position: absolute;
35 width: 8px;
36 height: 8px;
37 background: #3a86ff; /* Vibrant blue from the video */
38 border-radius: 50%;
39 /* Centering the dots in the ring */
40 top: 36px;
41 left: 36px;
42 /* Shadow to match the glow in the video */
43 box-shadow: 0 0 10px rgba(58, 134, 255, 0.6);
44 /* The animation that creates the fading trail effect */
45 animation: dotFade 1.1s linear infinite;
46 }
47
48 /* Keyframes for the fading effect */
49 @keyframes dotFade {
50 0% {
51 opacity: 1;
52 transform: scale(1.1);
53 }
54 100% {
55 opacity: 0.15;
56 transform: scale(0.6);
57 }
58 }
59
60 /*
61 Positioning each dot in a circle and applying a staggered delay.
62 We use 12 dots to match the density seen in the video.
63 */
64 .dot:nth-child(1) { transform: rotate(0deg) translateY(-30px); animation-delay: 0s; }
65 .dot:nth-child(2) { transform: rotate(30deg) translateY(-30px); animation-delay: -0.091s; }
66 .dot:nth-child(3) { transform: rotate(60deg) translateY(-30px); animation-delay: -0.182s; }
67 .dot:nth-child(4) { transform: rotate(90deg) translateY(-30px); animation-delay: -0.273s; }
68 .dot:nth-child(5) { transform: rotate(120deg) translateY(-30px); animation-delay: -0.364s; }
69 .dot:nth-child(6) { transform: rotate(150deg) translateY(-30px); animation-delay: -0.455s; }
70 .dot:nth-child(7) { transform: rotate(180deg) translateY(-30px); animation-delay: -0.546s; }
71 .dot:nth-child(8) { transform: rotate(210deg) translateY(-30px); animation-delay: -0.637s; }
72 .dot:nth-child(9) { transform: rotate(240deg) translateY(-30px); animation-delay: -0.728s; }
73 .dot:nth-child(10) { transform: rotate(270deg) translateY(-30px); animation-delay: -0.819s; }
74 .dot:nth-child(11) { transform: rotate(300deg) translateY(-30px); animation-delay: -0.910s; }
75 .dot:nth-child(12) { transform: rotate(330deg) translateY(-30px); animation-delay: -1.001s; }
76
77 </style>
78</head>
79<body>
80
81 <div class="loader">
82 <div class="dot"></div>
83 <div class="dot"></div>
84 <div class="dot"></div>
85 <div class="dot"></div>
86 <div class="dot"></div>
87 <div class="dot"></div>
88 <div class="dot"></div>
89 <div class="dot"></div>
90 <div class="dot"></div>
91 <div class="dot"></div>
92 <div class="dot"></div>
93 <div class="dot"></div>
94 </div>
95
96</body>
97</html>