model output
Gemini 3 Flash Preview

Loaders (WIP)
A 0.96T 0.31
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>Merging Dots Animation</title>
7    <style>
8        /* Define colors and basic setup */
9        :root {
10            --bg-color: #e74c3c; /* Flat UI Alizarin Red */
11            --dot-color: #ffffff;
12            --dot-size: 12px;
13            --dot-spacing: 24px;
14            --animation-duration: 2.8s;
15        }
16
17        * {
18            margin: 0;
19            padding: 0;
20            box-sizing: border-box;
21        }
22
23        body {
24            background-color: var(--bg-color);
25            height: 100vh;
26            display: flex;
27            justify-content: center;
28            align-items: center;
29            overflow: hidden;
30        }
31
32        /* Container for the dots */
33        .loader {
34            position: relative;
35            display: flex;
36            align-items: center;
37            justify-content: center;
38            width: 100px;
39            height: 100px;
40        }
41
42        /* Shared dot styling */
43        .dot {
44            width: var(--dot-size);
45            height: var(--dot-size);
46            background-color: var(--dot-color);
47            border-radius: 50%;
48            position: absolute;
49        }
50
51        /* Individual dot animations */
52        /* Center dot stays stationary */
53        .dot-middle {
54            z-index: 2;
55        }
56
57        /* Left dot moves inward and stays merged, then moves back */
58        .dot-left {
59            animation: move-left var(--animation-duration) ease-in-out infinite;
60        }
61
62        /* Right dot moves inward and stays merged, then moves back */
63        .dot-right {
64            animation: move-right var(--animation-duration) ease-in-out infinite;
65        }
66
67        /* 
68           Animation Keyframes:
69           0% - 30%: Dots move from their outer positions to center.
70           30% - 70%: Dots stay merged in the center.
71           70% - 100%: Dots move back to their outer positions.
72        */
73        @keyframes move-left {
74            0%, 100% {
75                transform: translateX(calc(var(--dot-spacing) * -1));
76            }
77            30%, 70% {
78                transform: translateX(0);
79            }
80        }
81
82        @keyframes move-right {
83            0%, 100% {
84                transform: translateX(var(--dot-spacing));
85            }
86            30%, 70% {
87                transform: translateX(0);
88            }
89        }
90
91    </style>
92</head>
93<body>
94
95    <div class="loader">
96        <div class="dot dot-left"></div>
97        <div class="dot dot-middle"></div>
98        <div class="dot dot-right"></div>
99    </div>
100
101</body>
102</html>