model output
Gemini 3 Flash Preview

Wavy Loading Animations
A 0.59T 0.26
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>Concentric Ring Loader</title>
7    <style>
8        /* 
9           Analysis of the animation:
10           - Background: Light gray (#eeeeee)
11           - Shape color: Dark gray/black (#1d1d1d)
12           - Structure: Three concentric layers rotating at different speeds and directions.
13           - Center: An hourglass shape (two opposing circle segments meeting at a point).
14           - Middle/Outer: Two opposing circle segments forming rings.
15           - Motion: Smooth linear rotation.
16        */
17
18        body {
19            background-color: #eeeeee;
20            margin: 0;
21            display: flex;
22            justify-content: center;
23            align-items: center;
24            height: 100vh;
25            overflow: hidden;
26        }
27
28        .loader-container {
29            position: relative;
30            width: 100px;
31            height: 100px;
32            display: flex;
33            justify-content: center;
34            align-items: center;
35            /* The video shows the loader slightly above center */
36            transform: translateY(-100px);
37        }
38
39        .layer {
40            position: absolute;
41            border-radius: 50%;
42            border-style: solid;
43            border-color: #1d1d1d transparent #1d1d1d transparent;
44            box-sizing: border-box;
45        }
46
47        /* Outer Layer: Largest diameter, slowest clockwise rotation */
48        .outer {
49            width: 90px;
50            height: 90px;
51            border-width: 9px;
52            animation: spin-clockwise 2.4s linear infinite;
53        }
54
55        /* Middle Layer: Medium diameter, medium speed counter-clockwise rotation */
56        .middle {
57            width: 58px;
58            height: 58px;
59            border-width: 8px;
60            animation: spin-counter-clockwise 1.6s linear infinite;
61        }
62
63        /* Inner Layer: Smallest (hourglass shape), fastest clockwise rotation */
64        .inner {
65            width: 0px;
66            height: 0px;
67            /* border-width here creates the two triangles meeting at center */
68            border-width: 16px; 
69            animation: spin-clockwise 1s linear infinite;
70        }
71
72        @keyframes spin-clockwise {
73            from {
74                transform: rotate(0deg);
75            }
76            to {
77                transform: rotate(360deg);
78            }
79        }
80
81        @keyframes spin-counter-clockwise {
82            from {
83                transform: rotate(0deg);
84            }
85            to {
86                transform: rotate(-360deg);
87            }
88        }
89
90        /* Responsive adjustments to keep it crisp */
91        @media (max-width: 600px) {
92            .loader-container {
93                transform: translateY(-50px) scale(0.8);
94            }
95        }
96    </style>
97</head>
98<body>
99
100    <div class="loader-container">
101        <!-- The layers are ordered from back to front, but absolute positioning handles stacking -->
102        <div class="layer outer"></div>
103        <div class="layer middle"></div>
104        <div class="layer inner"></div>
105    </div>
106
107</body>
108</html>