model output
Gemini 3 Flash Preview

Animated Dot Loaders
A 0.82T 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>Converging Dots Loader</title>
7    <style>
8        /* Define the background with a deep radial gradient to match the video */
9        body {
10            margin: 0;
11            padding: 0;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16            background: radial-gradient(circle, #1a122e 0%, #09070f 100%);
17            overflow: hidden;
18        }
19
20        /* Container to keep the dots centered relative to each other */
21        .loader {
22            position: relative;
23            display: flex;
24            justify-content: center;
25            align-items: center;
26        }
27
28        /* Styling for the individual dots */
29        .dot {
30            position: absolute;
31            width: 12px;
32            height: 12px;
33            background-color: #ffffff;
34            border-radius: 50%;
35            /* Subtle glow to match the soft edges in the video */
36            box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
37            /* Animation handles both movement (translateX), scaling, and opacity */
38            animation: converge 3s ease-in-out infinite;
39        }
40
41        /* Keyframes for the converging movement */
42        @keyframes converge {
43            0%, 100% {
44                /* Dots start spread out horizontally */
45                transform: translateX(calc(var(--i) * 28px)) scale(1);
46                opacity: 0.4;
47            }
48            50% {
49                /* Dots converge at the center (0), grow slightly, and brighten */
50                transform: translateX(0) scale(1.25);
51                opacity: 1;
52            }
53        }
54
55        /* Assigning index variables to each dot to control their horizontal offset */
56        /* Dot 1 (Leftmost) */
57        .dot:nth-child(1) { --i: -2; }
58        /* Dot 2 */
59        .dot:nth-child(2) { --i: -1; }
60        /* Dot 3 (Center) */
61        .dot:nth-child(3) { --i: 0; }
62        /* Dot 4 */
63        .dot:nth-child(4) { --i: 1; }
64        /* Dot 5 (Rightmost) */
65        .dot:nth-child(5) { --i: 2; }
66    </style>
67</head>
68<body>
69
70    <div class="loader">
71        <div class="dot"></div>
72        <div class="dot"></div>
73        <div class="dot"></div>
74        <div class="dot"></div>
75        <div class="dot"></div>
76    </div>
77
78</body>
79</html>