← back to Wavy Loading Animationscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Wavy Loading Animations
A 0.46T 0.27
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>Under Armour Logo Animation</title>
7 <style>
8 body {
9 display: flex;
10 justify-content: center;
11 align-items: center;
12 height: 100vh;
13 background-color: #f5f5f5;
14 margin: 0;
15 }
16 .logo {
17 width: 80px;
18 height: 80px;
19 position: relative;
20 animation: spin 1.5s ease-in-out forwards;
21 }
22 .logo:before {
23 content: "";
24 position: absolute;
25 top: 0;
26 left: 0;
27 width: 100%;
28 height: 100%;
29 background: radial-gradient(circle, #000 0%, #333 100%);
30 border-radius: 50%;
31 animation: pulse 1.5s ease-in-out infinite alternate;
32 }
33 .logo:after {
34 content: "";
35 position: absolute;
36 top: 50%;
37 left: 50%;
38 transform: translate(-50%, -50%);
39 width: 40px;
40 height: 40px;
41 background: radial-gradient(circle, #fff 0%, #ccc 100%);
42 border-radius: 50%;
43 animation: pulse 1.5s ease-in-out infinite alternate;
44 }
45 @keyframes spin {
46 0% {
47 transform: rotate(0deg);
48 }
49 100% {
50 transform: rotate(360deg);
51 }
52 }
53 @keyframes pulse {
54 0% {
55 transform: scale(1);
56 }
57 100% {
58 transform: scale(1.1);
59 }
60 }
61 </style>
62</head>
63<body>
64 <div class="logo"></div>
65</body>
66</html>