model output
Gemini 3 Flash Preview

Animated Dot Loaders
A 0.82T 0.19
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>Sequential Dipping Dots Loader</title>
7    <style>
8        /* 
9           Analysis:
10           - Background: Dark purple radial gradient.
11           - Dots: 5 dots in a row. 
12           - Interaction: Each dot sequentially dips downwards and turns bright white.
13           - Timing: Smooth easing with a distinct pause between the full cycles.
14        */
15
16        :root {
17            --bg-center: #1a1227;
18            --bg-outer: #09070c;
19            --dot-dim: rgba(255, 255, 255, 0.3);
20            --dot-bright: rgba(255, 255, 255, 1);
21            --dot-size: 12px;
22            --anim-duration: 3s; /* Total cycle for one dot */
23        }
24
25        body {
26            margin: 0;
27            padding: 0;
28            display: flex;
29            justify-content: center;
30            align-items: center;
31            height: 100vh;
32            background: radial-gradient(circle, var(--bg-center) 0%, var(--bg-outer) 100%);
33            overflow: hidden;
34        }
35
36        .loader-container {
37            display: flex;
38            gap: 18px; /* Spacing between dots */
39        }
40
41        .dot {
42            width: var(--dot-size);
43            height: var(--dot-size);
44            background-color: var(--dot-dim);
45            border-radius: 50%;
46            /* 
47               Animation is applied to all dots. 
48               The 'dip' movement happens in the first portion of the duration.
49            */
50            animation: dip-animation var(--anim-duration) infinite ease-in-out;
51        }
52
53        /* 
54           Keyframes:
55           0% to 15%: Start brightening and move down.
56           15% to 30%: Reach peak depth (around 20px) and start returning.
57           30% to 45%: Return to original position and dim back down.
58           45% to 100%: Stay idle to allow others to finish.
59        */
60        @keyframes dip-animation {
61            0% {
62                transform: translateY(0);
63                background-color: var(--dot-dim);
64                box-shadow: 0 0 0 rgba(255, 255, 255, 0);
65            }
66            15% {
67                background-color: var(--dot-bright);
68                box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
69            }
70            30% {
71                transform: translateY(22px);
72                background-color: var(--dot-bright);
73                box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
74            }
75            45% {
76                transform: translateY(0);
77                background-color: var(--dot-bright);
78                box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
79            }
80            60%, 100% {
81                transform: translateY(0);
82                background-color: var(--dot-dim);
83                box-shadow: 0 0 0 rgba(255, 255, 255, 0);
84            }
85        }
86
87        /* 
88           Staggering the start time of each dot to create the sequential effect.
89           Offset is calculated to make them follow each other closely.
90        */
91        .dot:nth-child(1) { animation-delay: 0.0s; }
92        .dot:nth-child(2) { animation-delay: 0.2s; }
93        .dot:nth-child(3) { animation-delay: 0.4s; }
94        .dot:nth-child(4) { animation-delay: 0.6s; }
95        .dot:nth-child(5) { animation-delay: 0.8s; }
96
97    </style>
98</head>
99<body>
100
101    <div class="loader-container">
102        <div class="dot"></div>
103        <div class="dot"></div>
104        <div class="dot"></div>
105        <div class="dot"></div>
106        <div class="dot"></div>
107    </div>
108
109</body>
110</html>