model output
Gemini 3 Flash Preview

Loaders (WIP)
A 0.78T 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>Loader Animation Recreated</title>
7    <style>
8        /* 
9           Color analysis: The background is a vibrant red-orange.
10           Hex: #e8513f 
11        */
12        body {
13            margin: 0;
14            padding: 0;
15            display: flex;
16            justify-content: center;
17            align-items: center;
18            height: 100vh;
19            background-color: #e8513f;
20            overflow: hidden;
21        }
22
23        .loader-container {
24            position: relative;
25            width: 100px;
26            height: 100px;
27            display: flex;
28            justify-content: center;
29            align-items: center;
30        }
31
32        /* The central dot */
33        .dot {
34            position: absolute;
35            width: 4px;
36            height: 4px;
37            background-color: white;
38            border-radius: 50%;
39        }
40
41        /* 
42           The rotating arcs. 
43           Using SVG for precise control over arc length (dash-array) 
44           and rounded caps (stroke-linecap).
45        */
46        .arcs-svg {
47            width: 60px;
48            height: 60px;
49            animation: rotate 1.4s linear infinite;
50        }
51
52        .arc-path {
53            fill: none;
54            stroke: white;
55            stroke-width: 3;
56            stroke-linecap: round;
57            /* 
58               The circle radius is 20. Circumference = 2 * PI * 20 ≈ 125.6.
59               To have two arcs, the pattern repeats twice. 
60               Dasharray of "1 61.8" means: 1px dash, 61.8px gap. 
61               (1 + 61.8) * 2 ≈ 125.6.
62            */
63            stroke-dasharray: 1 61.8;
64            stroke-dashoffset: 0;
65            animation: stretch 1.4s ease-in-out infinite;
66        }
67
68        /* 
69           The main rotation animation. 
70           The video shows a constant spinning motion.
71        */
72        @keyframes rotate {
73            0% {
74                transform: rotate(0deg);
75            }
76            100% {
77                transform: rotate(360deg);
78            }
79        }
80
81        /* 
82           The stretching animation.
83           The arcs grow from tiny points to longer segments and then shrink back.
84           The offset is adjusted so the "tail" catches up to the "head".
85        */
86        @keyframes stretch {
87            0% {
88                stroke-dasharray: 1 61.8;
89                stroke-dashoffset: 0;
90            }
91            50% {
92                /* Arcs grow to occupy roughly 1/4 of the circle each */
93                stroke-dasharray: 25 37.8;
94                stroke-dashoffset: -15;
95            }
96            100% {
97                /* Arcs shrink back to points, having moved forward */
98                stroke-dasharray: 1 61.8;
99                stroke-dashoffset: -62.8; 
100            }
101        }
102    </style>
103</head>
104<body>
105
106    <div class="loader-container">
107        <!-- Center Dot -->
108        <div class="dot"></div>
109        
110        <!-- Rotating Arcs -->
111        <svg class="arcs-svg" viewBox="0 0 50 50">
112            <circle 
113                class="arc-path" 
114                cx="25" 
115                cy="25" 
116                r="20"
117            />
118        </svg>
119    </div>
120
121</body>
122</html>