model output
Gemini 3 Flash Preview

flat loading animate
A 0.80T 0.30
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>X-Loader Animation</title>
7    <style>
8        :root {
9            /* Palette based on the animation colors */
10            --teal-muted: #2a9d8f;
11            --coral: #e76f51;
12            --yellow: #e9c46a;
13            --teal-dark: #264653;
14            
15            --duration: 1.2s;
16            --easing: cubic-bezier(0.45, 0, 0.55, 1);
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            overflow: hidden;
28        }
29
30        .loader {
31            position: relative;
32            width: 200px;
33            height: 200px;
34            /* The whole container rotates 90 degrees every cycle */
35            animation: rotate-loader var(--duration) var(--easing) infinite;
36        }
37
38        @keyframes rotate-loader {
39            0% { transform: rotate(0deg); }
40            100% { transform: rotate(90deg); }
41        }
42
43        .arm {
44            position: absolute;
45            top: 50%;
46            left: 50%;
47            width: 0;
48            height: 0;
49        }
50
51        /* Diagonal arms for the 'X' shape */
52        .arm-ne { transform: rotate(45deg);  --color: var(--teal-muted); }
53        .arm-se { transform: rotate(135deg); --color: var(--coral); }
54        .arm-sw { transform: rotate(225deg); --color: var(--yellow); }
55        .arm-nw { transform: rotate(315deg); --color: var(--teal-dark); }
56
57        .dot {
58            position: absolute;
59            left: 0;
60            top: 50%;
61            background-color: var(--color);
62            border-radius: 50%;
63            transform: translateY(-50%) translateX(var(--start));
64            animation: move-dot var(--duration) var(--easing) infinite;
65        }
66
67        /* Dot specifics: sizing and distances */
68        .dot-1 {
69            width: 9px;
70            height: 9px;
71            --start: 14px;
72            --end: 30px;
73            margin-top: -4.5px;
74        }
75
76        .dot-2 {
77            width: 13px;
78            height: 13px;
79            --start: 32px;
80            --end: 62px;
81            margin-top: -6.5px;
82        }
83
84        .dot-3 {
85            width: 17px;
86            height: 17px;
87            --start: 54px;
88            --end: 98px;
89            margin-top: -8.5px;
90        }
91
92        @keyframes move-dot {
93            0%, 100% {
94                transform: translateY(-50%) translateX(var(--start)) scale(0.9);
95            }
96            50% {
97                transform: translateY(-50%) translateX(var(--end)) scale(1.1);
98            }
99        }
100    </style>
101</head>
102<body>
103
104    <div class="loader">
105        <!-- Top Right Arm -->
106        <div class="arm arm-ne">
107            <div class="dot dot-1"></div>
108            <div class="dot dot-2"></div>
109            <div class="dot dot-3"></div>
110        </div>
111        <!-- Bottom Right Arm -->
112        <div class="arm arm-se">
113            <div class="dot dot-1"></div>
114            <div class="dot dot-2"></div>
115            <div class="dot dot-3"></div>
116        </div>
117        <!-- Bottom Left Arm -->
118        <div class="arm arm-sw">
119            <div class="dot dot-1"></div>
120            <div class="dot dot-2"></div>
121            <div class="dot dot-3"></div>
122        </div>
123        <!-- Top Left Arm -->
124        <div class="arm arm-nw">
125            <div class="dot dot-1"></div>
126            <div class="dot dot-2"></div>
127            <div class="dot dot-3"></div>
128        </div>
129    </div>
130
131</body>
132</html>