model output
Gemini 3 Flash Preview

flat loading animate
A 0.92T 0.36
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>Loading Animation Recreated</title>
7    <style>
8        /* Center the animation on the page */
9        body, html {
10            height: 100%;
11            margin: 0;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            background-color: #ffffff;
16        }
17
18        .loader {
19            position: relative;
20            width: 80px;
21            height: 80px;
22            display: flex;
23            justify-content: center;
24            align-items: center;
25        }
26
27        /* Base styles for the circles */
28        .dot {
29            position: absolute;
30            width: 24px;
31            height: 24px;
32            border-radius: 50%;
33            mix-blend-mode: multiply; /* Creates the overlap color effect if needed */
34        }
35
36        /* Red circle style and animation */
37        .dot-red {
38            background-color: #ff5252;
39            animation: orbit-red 2s ease-in-out infinite;
40        }
41
42        /* Blue circle style and animation */
43        .dot-blue {
44            background-color: #24b1d5;
45            animation: orbit-blue 2s ease-in-out infinite;
46        }
47
48        /**
49         * Keyframes for the Red Dot
50         * It starts medium, shrinks while moving left, then expands while moving to the center
51         */
52        @keyframes orbit-red {
53            0% {
54                transform: translateX(-10px) scale(1);
55                z-index: 2;
56            }
57            25% {
58                transform: translateX(-25px) scale(0.6);
59                z-index: 1;
60            }
61            50% {
62                transform: translateX(0px) scale(1.4);
63                z-index: 2;
64            }
65            75% {
66                transform: translateX(-25px) scale(0.6);
67                z-index: 1;
68            }
69            100% {
70                transform: translateX(-10px) scale(1);
71                z-index: 2;
72            }
73        }
74
75        /**
76         * Keyframes for the Blue Dot
77         * Moves in opposition to the red dot, scaling down when the red dot is scaling up
78         */
79        @keyframes orbit-blue {
80            0% {
81                transform: translateX(10px) scale(1);
82                z-index: 1;
83            }
84            25% {
85                transform: translateX(15px) scale(0.9);
86                z-index: 2;
87            }
88            50% {
89                transform: translateX(35px) scale(0.6);
90                z-index: 1;
91            }
92            75% {
93                transform: translateX(15px) scale(0.9);
94                z-index: 2;
95            }
96            100% {
97                transform: translateX(10px) scale(1);
98                z-index: 1;
99            }
100        }
101    </style>
102</head>
103<body>
104
105    <div class="loader">
106        <div class="dot dot-red"></div>
107        <div class="dot dot-blue"></div>
108    </div>
109
110</body>
111</html>