model output
Qwen3-VL-8B-Instruct

flat loading animate
A 0.29T 0.00
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>Animation</title>
7<style>
8  body {
9    display: flex;
10    justify-content: center;
11    align-items: center;
12    height: 100vh;
13    background: white;
14    overflow: hidden;
15  }
16  .circle {
17    width: 40px;
18    height: 40px;
19    border-radius: 50%;
20    position: absolute;
21    top: 50%;
22    left: 50%;
23    transform: translate(-50%, -50%);
24    background: radial-gradient(circle, rgba(255, 105, 135, 0.5), rgba(255, 255, 255, 0));
25    box-shadow: 0 0 10px rgba(255, 105, 135, 0.5);
26    transition: all 0.3s ease;
27  }
28  .circle:nth-child(1) {
29    background: radial-gradient(circle, rgba(255, 105, 135, 0.5), rgba(255, 255, 255, 0));
30    box-shadow: 0 0 10px rgba(255, 105, 135, 0.5);
31  }
32  .circle:nth-child(2) {
33    background: radial-gradient(circle, rgba(52, 152, 219, 0.5), rgba(255, 255, 255, 0));
34    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
35  }
36  .circle:nth-child(3) {
37    background: radial-gradient(circle, rgba(255, 105, 135, 0.5), rgba(255, 255, 255, 0));
38    box-shadow: 0 0 10px rgba(255, 105, 135, 0.5);
39  }
40  .circle:nth-child(4) {
41    background: radial-gradient(circle, rgba(52, 152, 219, 0.5), rgba(255, 255, 255, 0));
42    box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
43  }
44  .circle:nth-child(1) {
45    animation: spin 1.5s ease-in-out infinite alternate;
46  }
47  .circle:nth-child(2) {
48    animation: spin 1.5s ease-in-out infinite alternate;
49    animation-delay: 0.3s;
50  }
51  .circle:nth-child(3) {
52    animation: spin 1.5s ease-in-out infinite alternate;
53    animation-delay: 0.6s;
54  }
55  .circle:nth-child(4) {
56    animation: spin 1.5s ease-in-out infinite alternate;
57    animation-delay: 0.9s;
58  }
59  @keyframes spin {
60    0% {
61      transform: translate(-50%, -50%) rotate(0deg);
62    }
63    100% {
64      transform: translate(-50%, -50%) rotate(360deg);
65    }
66  }
67</style>
68</head>
69<body>
70  <div class="circle"></div>
71  <div class="circle"></div>
72  <div class="circle"></div>
73  <div class="circle"></div>
74</body>
75</html>