model output
Qwen3-VL-8B-Instruct

flat loading animate
A 0.20T 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>Rotating Circles Animation</title>
7<style>
8  body {
9    display: flex;
10    justify-content: center;
11    align-items: center;
12    height: 100vh;
13    background: white;
14    margin: 0;
15  }
16  .container {
17    position: relative;
18    width: 200px;
19    height: 200px;
20  }
21  .circle {
22    position: absolute;
23    width: 40px;
24    height: 40px;
25    border-radius: 50%;
26    background: linear-gradient(circle, #333, #666);
27    animation: rotate 4s linear infinite;
28    transform-origin: center;
29  }
30  .circle:nth-child(1) {
31    top: 50%;
32    left: 50%;
33    transform: translate(-50%, -50%);
34    animation-delay: 0s;
35    background: linear-gradient(circle, #ff6b6b, #ff8e8e);
36  }
37  .circle:nth-child(2) {
38    top: 50%;
39    left: 50%;
40    transform: translate(-50%, -50%) rotate(45deg);
41    animation-delay: 0.5s;
42    background: linear-gradient(circle, #4ecdc4, #5ac8cc);
43  }
44  .circle:nth-child(3) {
45    top: 50%;
46    left: 50%;
47    transform: translate(-50%, -50%) rotate(90deg);
48    animation-delay: 1s;
49    background: linear-gradient(circle, #45b7d1, #54c1d6);
50  }
51  .circle:nth-child(4) {
52    top: 50%;
53    left: 50%;
54    transform: translate(-50%, -50%) rotate(135deg);
55    animation-delay: 1.5s;
56    background: linear-gradient(circle, #ff9a9e, #ffbd9e);
57  }
58  .circle:nth-child(5) {
59    top: 50%;
60    left: 50%;
61    transform: translate(-50%, -50%) rotate(180deg);
62    animation-delay: 2s;
63    background: linear-gradient(circle, #ff6b6b, #ff8e8e);
64  }
65  .circle:nth-child(6) {
66    top: 50%;
67    left: 50%;
68    transform: translate(-50%, -50%) rotate(225deg);
69    animation-delay: 2.5s;
70    background: linear-gradient(circle, #4ecdc4, #5ac8cc);
71  }
72  .circle:nth-child(7) {
73    top: 50%;
74    left: 50%;
75    transform: translate(-50%, -50%) rotate(270deg);
76    animation-delay: 3s;
77    background: linear-gradient(circle, #45b7d1, #54c1d6);
78  }
79  .circle:nth-child(8) {
80    top: 50%;
81    left: 50%;
82    transform: translate(-50%, -50%) rotate(315deg);
83    animation-delay: 3.5s;
84    background: linear-gradient(circle, #ff9a9e, #ffbd9e);
85  }
86  @keyframes rotate {
87    0% {
88      transform: translate(-50%, -50%) rotate(0deg);
89    }
90    100% {
91      transform: translate(-50%, -50%) rotate(360deg);
92    }
93  }
94</style>
95</head>
96<body>
97  <div class="container">
98    <div class="circle"></div>
99    <div class="circle"></div>
100    <div class="circle"></div>
101    <div class="circle"></div>
102    <div class="circle"></div>
103    <div class="circle"></div>
104    <div class="circle"></div>
105    <div class="circle"></div>
106  </div>
107</body>
108</html>