model output
Qwen3-VL-8B-Instruct

Wavy Loading Animations
A 0.66T 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>Concentric Circles Animation</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            background-color: #f5f5f5;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16        }
17        .circle-container {
18            position: relative;
19            width: 100px;
20            height: 100px;
21        }
22        .circle {
23            position: absolute;
24            border: 1px solid #e0e0e0;
25            border-radius: 50%;
26            top: 0;
27            left: 0;
28            width: 100%;
29            height: 100%;
30            animation: pulse 2s ease-in-out infinite alternate;
31        }
32        .circle:nth-child(1) {
33            animation-delay: 0s;
34        }
35        .circle:nth-child(2) {
36            animation-delay: 0.2s;
37        }
38        .circle:nth-child(3) {
39            animation-delay: 0.4s;
40        }
41        .circle:nth-child(4) {
42            animation-delay: 0.6s;
43        }
44        .circle:nth-child(5) {
45            animation-delay: 0.8s;
46        }
47        .circle:nth-child(6) {
48            animation-delay: 1.0s;
49        }
50        .circle:nth-child(7) {
51            animation-delay: 1.2s;
52        }
53        .circle:nth-child(8) {
54            animation-delay: 1.4s;
55        }
56        .circle:nth-child(9) {
57            animation-delay: 1.6s;
58        }
59        .circle:nth-child(10) {
60            animation-delay: 1.8s;
61        }
62        @keyframes pulse {
63            0% {
64                transform: scale(1);
65            }
66            100% {
67                transform: scale(1.2);
68            }
69        }
70    </style>
71</head>
72<body>
73    <div class="circle-container">
74        <div class="circle"></div>
75        <div class="circle"></div>
76        <div class="circle"></div>
77        <div class="circle"></div>
78        <div class="circle"></div>
79        <div class="circle"></div>
80        <div class="circle"></div>
81        <div class="circle"></div>
82        <div class="circle"></div>
83        <div class="circle"></div>
84    </div>
85</body>
86</html>