model output
Gemini 3 Flash Preview

flat loading animate
A 0.86T 0.27
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>Squeezing Dots Loader</title>
7    <style>
8        :root {
9            --navy: #2c3e50;
10            --teal: #4ebcb4;
11            --red: #f15a5a;
12            --yellow: #f39c12;
13            --duration: 2s;
14            --dot-size: 18px;
15            --container-size: 50px;
16            --squeeze-dist: 10px;
17        }
18
19        body {
20            margin: 0;
21            padding: 0;
22            display: flex;
23            justify-content: center;
24            align-items: center;
25            min-height: 100vh;
26            background-color: #ffffff;
27        }
28
29        /* The container rotates the entire group */
30        .loader {
31            position: relative;
32            width: var(--container-size);
33            height: var(--container-size);
34            animation: rotate-container var(--duration) infinite cubic-bezier(0.65, 0.05, 0.36, 1);
35        }
36
37        .dot {
38            position: absolute;
39            width: var(--dot-size);
40            height: var(--dot-size);
41            border-radius: 50%;
42            /* All dots share the same squeeze timing */
43            animation: squeeze-move var(--duration) infinite cubic-bezier(0.65, 0.05, 0.36, 1);
44        }
45
46        /* Initial positions and individual squeeze directions */
47        .dot-1 {
48            top: 0;
49            left: 0;
50            background-color: var(--navy);
51            --tx: var(--squeeze-dist);
52            --ty: var(--squeeze-dist);
53        }
54
55        .dot-2 {
56            top: 0;
57            right: 0;
58            background-color: var(--teal);
59            --tx: calc(-1 * var(--squeeze-dist));
60            --ty: var(--squeeze-dist);
61        }
62
63        .dot-3 {
64            bottom: 0;
65            right: 0;
66            background-color: var(--yellow);
67            --tx: calc(-1 * var(--squeeze-dist));
68            --ty: calc(-1 * var(--squeeze-dist));
69        }
70
71        .dot-4 {
72            bottom: 0;
73            left: 0;
74            background-color: var(--red);
75            --tx: var(--squeeze-dist);
76            --ty: calc(-1 * var(--squeeze-dist));
77        }
78
79        /* Main rotation of the container */
80        @keyframes rotate-container {
81            0% {
82                transform: rotate(0deg);
83            }
84            100% {
85                transform: rotate(360deg);
86            }
87        }
88
89        /* 
90           The dots move towards the center (squeeze) exactly between the 90-degree points.
91           This creates the "fluid" pulsing look seen in the video.
92        */
93        @keyframes squeeze-move {
94            0%, 25%, 50%, 75%, 100% {
95                transform: translate(0, 0);
96            }
97            12.5%, 37.5%, 62.5%, 87.5% {
98                transform: translate(var(--tx), var(--ty));
99            }
100        }
101    </style>
102</head>
103<body>
104
105    <div class="loader">
106        <div class="dot dot-1"></div>
107        <div class="dot dot-2"></div>
108        <div class="dot dot-3"></div>
109        <div class="dot dot-4"></div>
110    </div>
111
112</body>
113</html>