model output
Claude Sonnet 4.6

Wavy Loading Animations
A 0.61T 0.24
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>Spinner Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: #ebebeb;
12    display: flex;
13    justify-content: center;
14    align-items: flex-start;
15    padding-top: 70px;
16    height: 100vh;
17  }
18
19  .container {
20    position: relative;
21    width: 80px;
22    height: 80px;
23  }
24
25  /* Phase 1: Bowtie/hourglass shape */
26  .bowtie {
27    position: absolute;
28    top: 50%;
29    left: 50%;
30    transform: translate(-50%, -50%);
31    width: 60px;
32    height: 60px;
33    animation: bowtieFade 0.6s ease-in forwards;
34  }
35
36  .bowtie-top, .bowtie-bottom {
37    position: absolute;
38    left: 50%;
39    width: 0;
40    height: 0;
41  }
42
43  .bowtie-top {
44    top: 0;
45    transform: translateX(-50%);
46    border-left: 28px solid transparent;
47    border-right: 28px solid transparent;
48    border-bottom: 30px solid #1a1a1a;
49    border-radius: 4px 4px 0 0;
50  }
51
52  .bowtie-bottom {
53    bottom: 0;
54    transform: translateX(-50%);
55    border-left: 28px solid transparent;
56    border-right: 28px solid transparent;
57    border-top: 30px solid #1a1a1a;
58    border-radius: 0 0 4px 4px;
59  }
60
61  @keyframes bowtieFade {
62    0% { opacity: 1; }
63    80% { opacity: 1; }
64    100% { opacity: 0; }
65  }
66
67  /* Phase 2: Spinning loader */
68  .spinner {
69    position: absolute;
70    top: 50%;
71    left: 50%;
72    transform: translate(-50%, -50%);
73    opacity: 0;
74    animation: spinnerAppear 0.6s ease-in forwards;
75    animation-delay: 0.5s;
76  }
77
78  @keyframes spinnerAppear {
79    0% { opacity: 0; }
80    100% { opacity: 1; }
81  }
82
83  /* Outer ring */
84  .ring {
85    position: absolute;
86    border-radius: 50%;
87    border: 4px solid transparent;
88  }
89
90  .ring-outer {
91    width: 70px;
92    height: 70px;
93    top: -35px;
94    left: -35px;
95    border-top-color: #555;
96    border-right-color: #555;
97    border-bottom-color: #888;
98    border-left-color: transparent;
99    animation: spinOuter 1.2s linear infinite;
100  }
101
102  .ring-mid {
103    width: 52px;
104    height: 52px;
105    top: -26px;
106    left: -26px;
107    border: 3px solid transparent;
108    border-top-color: #777;
109    border-right-color: transparent;
110    border-bottom-color: #555;
111    border-left-color: #777;
112    animation: spinMid 1.2s linear infinite reverse;
113  }
114
115  .ring-inner {
116    width: 36px;
117    height: 36px;
118    top: -18px;
119    left: -18px;
120    border: 3px solid transparent;
121    border-top-color: #444;
122    border-right-color: #666;
123    border-bottom-color: transparent;
124    border-left-color: #444;
125    animation: spinInner 0.8s linear infinite;
126  }
127
128  /* Center circle */
129  .center-circle {
130    width: 18px;
131    height: 18px;
132    top: -9px;
133    left: -9px;
134    background: radial-gradient(circle at 40% 35%, #ccc, #888 40%, #444 80%, #222);
135    border-radius: 50%;
136    position: absolute;
137    animation: centerPulse 1.2s ease-in-out infinite;
138  }
139
140  @keyframes spinOuter {
141    0% { transform: rotate(0deg); }
142    100% { transform: rotate(360deg); }
143  }
144
145  @keyframes spinMid {
146    0% { transform: rotate(0deg); }
147    100% { transform: rotate(360deg); }
148  }
149
150  @keyframes spinInner {
151    0% { transform: rotate(0deg); }
152    100% { transform: rotate(360deg); }
153  }
154
155  @keyframes centerPulse {
156    0%, 100% { 
157      background: radial-gradient(circle at 40% 35%, #ccc, #888 40%, #444 80%, #222);
158    }
159    50% { 
160      background: radial-gradient(circle at 40% 35%, #eee, #bbb 40%, #777 80%, #555);
161    }
162  }
163
164  /* Dashed segments effect on outer ring */
165  .ring-outer-dashes {
166    width: 74px;
167    height: 74px;
168    top: -37px;
169    left: -37px;
170    border: 5px dashed #444;
171    border-radius: 50%;
172    animation: spinOuter 1.8s linear infinite;
173    opacity: 0.6;
174  }
175</style>
176</head>
177<body>
178<div class="container">
179  <!-- Phase 1: Bowtie -->
180  <div class="bowtie">
181    <div class="bowtie-top"></div>
182    <div class="bowtie-bottom"></div>
183  </div>
184
185  <!-- Phase 2: Spinner -->
186  <div class="spinner">
187    <div class="ring ring-outer-dashes"></div>
188    <div class="ring ring-outer"></div>
189    <div class="ring ring-mid"></div>
190    <div class="ring ring-inner"></div>
191    <div class="center-circle"></div>
192  </div>
193</div>
194</body>
195</html>