model output
Gemini 3 Flash Preview

Loaders (WIP)
A 0.82T 0.32
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>Recreated Animation</title>
7    <style>
8        /* Match the background color from the video */
9        body {
10            background-color: #e8503f;
11            margin: 0;
12            padding: 0;
13            display: flex;
14            justify-content: center;
15            align-items: flex-start; /* The logo is positioned near the top */
16            height: 100vh;
17            overflow: hidden;
18        }
19
20        /* Container to position the logo exactly as seen in the video */
21        .container {
22            margin-top: 13vh;
23        }
24
25        /* SVG styling and animation */
26        .loader {
27            width: 70px;
28            height: 70px;
29            /* Linear rotation matches the steady spin in the video */
30            animation: rotate-main 1.5s linear infinite;
31            will-change: transform;
32        }
33
34        /* Styling for the circular paths */
35        .ring {
36            fill: none;
37            stroke: #ffffff;
38            stroke-width: 10;
39            stroke-linecap: round; /* Gives the segments rounded ends */
40        }
41
42        /* Outer ring segments */
43        .outer {
44            /* Radius 40 (Circumference ~251). Dash 50, Gap 75 creates two segments */
45            stroke-dasharray: 50 75.5;
46        }
47
48        /* Inner ring segments */
49        .inner {
50            /* Radius 18 (Circumference ~113). Dash 28, Gap 28 creates two segments */
51            stroke-dasharray: 28 28.5;
52        }
53
54        /* Center solid circle */
55        .dot {
56            fill: #ffffff;
57        }
58
59        /* Keyframes for a smooth 360-degree rotation */
60        @keyframes rotate-main {
61            from {
62                transform: rotate(0deg);
63            }
64            to {
65                transform: rotate(360deg);
66            }
67        }
68    </style>
69</head>
70<body>
71
72    <div class="container">
73        <svg class="loader" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
74            <!-- 
75                Outer Ring:
76                Rotated -45deg initially to match the segment orientation at 00:00.000 
77            -->
78            <circle class="ring outer" cx="50" cy="50" r="40" transform="rotate(-45 50 50)" />
79            
80            <!-- 
81                Inner Ring:
82                Offset 90 degrees from the outer ring to match the visual pattern 
83            -->
84            <circle class="ring inner" cx="50" cy="50" r="18" transform="rotate(45 50 50)" />
85            
86            <!-- Center stationary dot -->
87            <circle class="dot" cx="50" cy="50" r="4" />
88        </svg>
89    </div>
90
91</body>
92</html>