model output
Qwen3-VL-8B-Instruct

flat loading animate
A 0.76T 0.31
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 Circle Animation</title>
7<style>
8  body {
9    display: flex;
10    justify-content: center;
11    align-items: center;
12    height: 100vh;
13    margin: 0;
14    background: white;
15  }
16  .circle {
17    width: 80px;
18    height: 80px;
19    border-radius: 50%;
20    position: relative;
21    animation: rotate 4s linear infinite;
22  }
23  .half {
24    position: absolute;
25    top: 0;
26    left: 0;
27    width: 100%;
28    height: 100%;
29    border-radius: 50%;
30    background: linear-gradient(to right, #00bfa5, #f9a826);
31  }
32  .half:nth-child(2) {
33    background: linear-gradient(to right, #00bfa5, #f9a826);
34    transform: rotate(180deg);
35  }
36  @keyframes rotate {
37    0% {
38      transform: rotate(0deg);
39    }
40    25% {
41      transform: rotate(90deg);
42    }
43    50% {
44      transform: rotate(180deg);
45    }
46    75% {
47      transform: rotate(270deg);
48    }
49    100% {
50      transform: rotate(360deg);
51    }
52  }
53</style>
54</head>
55<body>
56  <div class="circle">
57    <div class="half"></div>
58    <div class="half"></div>
59  </div>
60</body>
61</html>