model output
Gemini 3 Flash Preview

Animated Concepts #3
A 0.63T 0.22
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 Recreation</title>
7    <style>
8        /* Define the background and center the loader */
9        body {
10            margin: 0;
11            padding: 0;
12            background-color: #1a1a1a;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16            height: 100vh;
17            overflow: hidden;
18        }
19
20        .loader-container {
21            position: relative;
22            width: 100px;
23            height: 100px;
24            display: flex;
25            justify-content: center;
26            align-items: center;
27        }
28
29        /* SVG styling */
30        svg {
31            width: 60px;
32            height: 60px;
33            /* The overall rotation of the loader */
34            animation: global-rotate 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
35        }
36
37        .arc {
38            fill: none;
39            stroke: #f87171; /* Coral/Salmon color from video */
40            stroke-width: 5;
41            stroke-linecap: round;
42            /* Arc length is roughly 1/6th of circumference */
43            stroke-dasharray: 18 113; 
44            transform-origin: center;
45        }
46
47        /* Individual arc animations to handle the fanning out and converging */
48        /* Each arc rotates relative to the SVG container */
49        
50        /* Middle arc - serves as the anchor point */
51        .arc-middle {
52            animation: fan-middle 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
53        }
54
55        /* Front arc - moves ahead and back */
56        .arc-front {
57            animation: fan-front 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
58        }
59
60        /* Back arc - moves behind and back */
61        .arc-back {
62            animation: fan-back 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
63        }
64
65        /* 
66           Timing Logic:
67           0s: Arcs are spread (creates the "two-blob" look where two arcs are close and one is opposite)
68           0.5s: Arcs converge into a single line
69           1.0s: Arcs converge (flipped orientation)
70           1.5s: Arcs are fully spread out into three distinct lines
71           2.0s: Return to start
72        */
73
74        @keyframes global-rotate {
75            0% {
76                transform: rotate(0deg);
77            }
78            100% {
79                transform: rotate(540deg); /* 1.5 rotations per cycle for that "swing" speed */
80            }
81        }
82
83        @keyframes fan-front {
84            0% { transform: rotate(15deg); }
85            25% { transform: rotate(0deg); }
86            50% { transform: rotate(15deg); }
87            75% { transform: rotate(45deg); }
88            100% { transform: rotate(15deg); }
89        }
90
91        @keyframes fan-middle {
92            0% { transform: rotate(0deg); }
93            25% { transform: rotate(0deg); }
94            50% { transform: rotate(0deg); }
95            75% { transform: rotate(0deg); }
96            100% { transform: rotate(0deg); }
97        }
98
99        @keyframes fan-back {
100            0% { transform: rotate(-160deg); } /* Positions it opposite at 0s */
101            25% { transform: rotate(0deg); }    /* Converges at 0.5s */
102            50% { transform: rotate(-160deg); }
103            75% { transform: rotate(-45deg); }  /* Spreads into 3 lines at 1.5s */
104            100% { transform: rotate(-160deg); }
105        }
106
107    </style>
108</head>
109<body>
110
111    <div class="loader-container">
112        <!-- SVG used for precise control over stroke caps and radius -->
113        <svg viewBox="0 0 50 50">
114            <!-- Front Arc -->
115            <circle class="arc arc-front" cx="25" cy="25" r="18"></circle>
116            <!-- Middle Arc -->
117            <circle class="arc arc-middle" cx="25" cy="25" r="18"></circle>
118            <!-- Back Arc -->
119            <circle class="arc arc-back" cx="25" cy="25" r="18"></circle>
120        </svg>
121    </div>
122
123</body>
124</html>