← back to Wavy Loading Animationscompare with ground truth →
model output
GPT-5.4
Wavy Loading Animations
A 0.54T 0.33
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>Swirl Loop Recreation</title>
7<style>
8 :root{
9 --bg:#f3f3f3;
10 --dark:#1f1f1f;
11 --mid:#8f8f8f;
12 --light:#cfcfcf;
13 --size:92px;
14 --dur:1.6s;
15 }
16
17 html,body{
18 margin:0;
19 height:100%;
20 background:var(--bg);
21 overflow:hidden;
22 font-family:sans-serif;
23 }
24
25 .stage{
26 position:relative;
27 width:100vw;
28 height:100vh;
29 }
30
31 .logo{
32 position:absolute;
33 left:50%;
34 top:11%;
35 width:var(--size);
36 height:var(--size);
37 transform:translateX(-50%);
38 }
39
40 .phase{
41 position:absolute;
42 inset:0;
43 opacity:0;
44 animation:phaseCycle calc(var(--dur) * 3) linear infinite;
45 }
46
47 .phase.p1{ animation-delay:0s; }
48 .phase.p2{ animation-delay:calc(var(--dur) * -1); }
49 .phase.p3{ animation-delay:calc(var(--dur) * -2); }
50
51 @keyframes phaseCycle{
52 0%, 30% { opacity:1; }
53 33.333%, 100% { opacity:0; }
54 }
55
56 /* Shared center */
57 .phase > *{
58 position:absolute;
59 left:50%;
60 top:50%;
61 transform:translate(-50%,-50%);
62 }
63
64 /* Phase 1: hourglass opening into circular motion */
65 .p1 .cap{
66 width:34px;
67 height:22px;
68 background:var(--dark);
69 border-radius:50% 50% 12% 12% / 100% 100% 0 0;
70 animation:p1Top var(--dur) cubic-bezier(.55,.05,.35,1) infinite;
71 }
72 .p1 .cap.bottom{
73 border-radius:12% 12% 50% 50% / 0 0 100% 100%;
74 animation-name:p1Bottom;
75 }
76
77 .p1 .spark{
78 width:10px;
79 height:10px;
80 background:var(--dark);
81 clip-path:polygon(50% 0, 68% 32%, 100% 50%, 68% 68%, 50% 100%, 32% 68%, 0 50%, 32% 32%);
82 filter:blur(.2px);
83 animation:p1Spark var(--dur) ease-in-out infinite;
84 }
85
86 @keyframes p1Top{
87 0% { transform:translate(-50%,-50%) translateY(-18px) rotate(0deg) scale(1.9,1.35); }
88 22% { transform:translate(-50%,-50%) translateY(-18px) rotate(0deg) scale(1.9,1.35); }
89 45% { transform:translate(-50%,-50%) translateY(-18px) rotate(-18deg) scale(1.65,1.15); }
90 70% { transform:translate(-50%,-50%) translate(-8px,-12px) rotate(-55deg) scale(1.25,.95); border-radius:55% 45% 20% 20% / 100% 100% 0 0; }
91 100% { transform:translate(-50%,-50%) translate(-12px,-8px) rotate(-92deg) scale(1.05,.82); border-radius:60% 40% 24% 24% / 100% 100% 0 0; }
92 }
93 @keyframes p1Bottom{
94 0% { transform:translate(-50%,-50%) translateY(18px) rotate(0deg) scale(1.9,1.35); }
95 22% { transform:translate(-50%,-50%) translateY(18px) rotate(0deg) scale(1.9,1.35); }
96 45% { transform:translate(-50%,-50%) translateY(18px) rotate(-18deg) scale(1.65,1.15); }
97 70% { transform:translate(-50%,-50%) translate(8px,12px) rotate(-55deg) scale(1.25,.95); border-radius:20% 20% 55% 45% / 0 0 100% 100%; }
98 100% { transform:translate(-50%,-50%) translate(12px,8px) rotate(-92deg) scale(1.05,.82); border-radius:24% 24% 60% 40% / 0 0 100% 100%; }
99 }
100 @keyframes p1Spark{
101 0%,18% { opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(0deg); }
102 28% { opacity:.9; transform:translate(-50%,-50%) scale(.9) rotate(20deg); }
103 45% { opacity:.55; transform:translate(-50%,-50%) scale(1.15) rotate(90deg); }
104 70% { opacity:.25; transform:translate(-50%,-50%) scale(.8) rotate(180deg); }
105 100% { opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(260deg); }
106 }
107
108 /* Phase 2: dark ring + pale inner swirl */
109 .p2{
110 animation-name:phaseCycle;
111 }
112 .p2 .ring{
113 width:58px;
114 height:58px;
115 border-radius:50%;
116 background:
117 conic-gradient(from 18deg,
118 transparent 0 18deg,
119 var(--dark) 18deg 112deg,
120 transparent 112deg 198deg,
121 var(--dark) 198deg 292deg,
122 transparent 292deg 360deg);
123 -webkit-mask:radial-gradient(circle, transparent 0 17px, #000 18px);
124 mask:radial-gradient(circle, transparent 0 17px, #000 18px);
125 animation:spinCW var(--dur) linear infinite;
126 }
127 .p2 .swirl{
128 width:34px;
129 height:34px;
130 border-radius:50%;
131 background:
132 conic-gradient(from 0deg,
133 rgba(0,0,0,0) 0 24deg,
134 #bdbdbd 24deg 92deg,
135 rgba(0,0,0,0) 92deg 144deg,
136 #bdbdbd 144deg 212deg,
137 rgba(0,0,0,0) 212deg 264deg,
138 #bdbdbd 264deg 332deg,
139 rgba(0,0,0,0) 332deg 360deg);
140 -webkit-mask:
141 radial-gradient(circle at 50% 50%, transparent 0 5px, #000 6px),
142 radial-gradient(circle, #000 0 100%);
143 -webkit-mask-composite: source-over;
144 mask-composite: add;
145 filter:blur(.2px);
146 animation:spinCCW calc(var(--dur) * .72) linear infinite;
147 }
148
149 /* Phase 3: light ring + dark inner swirl */
150 .p3 .ring{
151 width:58px;
152 height:58px;
153 border-radius:50%;
154 background:
155 conic-gradient(from 18deg,
156 transparent 0 18deg,
157 var(--light) 18deg 112deg,
158 transparent 112deg 198deg,
159 var(--light) 198deg 292deg,
160 transparent 292deg 360deg);
161 -webkit-mask:radial-gradient(circle, transparent 0 17px, #000 18px);
162 mask:radial-gradient(circle, transparent 0 17px, #000 18px);
163 animation:spinCW var(--dur) linear infinite;
164 }
165 .p3 .swirl{
166 width:28px;
167 height:28px;
168 border-radius:50%;
169 background:
170 conic-gradient(from 0deg,
171 rgba(0,0,0,0) 0 28deg,
172 var(--dark) 28deg 96deg,
173 rgba(0,0,0,0) 96deg 148deg,
174 var(--dark) 148deg 216deg,
175 rgba(0,0,0,0) 216deg 268deg,
176 var(--dark) 268deg 336deg,
177 rgba(0,0,0,0) 336deg 360deg);
178 -webkit-mask:
179 radial-gradient(circle at 50% 50%, transparent 0 4px, #000 5px),
180 radial-gradient(circle, #000 0 100%);
181 -webkit-mask-composite: source-over;
182 mask-composite: add;
183 animation:spinCCW calc(var(--dur) * .72) linear infinite;
184 }
185
186 @keyframes spinCW{
187 from{ transform:translate(-50%,-50%) rotate(0deg); }
188 to { transform:translate(-50%,-50%) rotate(360deg); }
189 }
190 @keyframes spinCCW{
191 from{ transform:translate(-50%,-50%) rotate(360deg); }
192 to { transform:translate(-50%,-50%) rotate(0deg); }
193 }
194</style>
195</head>
196<body>
197 <div class="stage">
198 <div class="logo">
199 <div class="phase p1">
200 <div class="cap top"></div>
201 <div class="cap bottom"></div>
202 <div class="spark"></div>
203 </div>
204
205 <div class="phase p2">
206 <div class="ring"></div>
207 <div class="swirl"></div>
208 </div>
209
210 <div class="phase p3">
211 <div class="ring"></div>
212 <div class="swirl"></div>
213 </div>
214 </div>
215 </div>
216</body>
217</html>