model output
Claude Sonnet 4.6

flat loading animate
A 0.97T 0.55
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 Dots</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    width: 100vw;
12    height: 100vh;
13    background: #fff;
14    display: flex;
15    align-items: center;
16    justify-content: center;
17  }
18
19  .spinner {
20    position: relative;
21    width: 80px;
22    height: 80px;
23    animation: rotate 1.8s linear infinite;
24  }
25
26  .dot {
27    position: absolute;
28    width: 34px;
29    height: 34px;
30    border-radius: 50%;
31  }
32
33  /* top-left */
34  .dot:nth-child(1) {
35    background: #2d4f5c;
36    top: 0;
37    left: 0;
38  }
39
40  /* top-right */
41  .dot:nth-child(2) {
42    background: #1ec8b0;
43    top: 0;
44    right: 0;
45  }
46
47  /* bottom-left */
48  .dot:nth-child(3) {
49    background: #f05454;
50    bottom: 0;
51    left: 0;
52  }
53
54  /* bottom-right */
55  .dot:nth-child(4) {
56    background: #f5a84a;
57    bottom: 0;
58    right: 0;
59  }
60
61  @keyframes rotate {
62    from { transform: rotate(0deg); }
63    to   { transform: rotate(360deg); }
64  }
65</style>
66</head>
67<body>
68  <div class="spinner">
69    <div class="dot"></div>
70    <div class="dot"></div>
71    <div class="dot"></div>
72    <div class="dot"></div>
73  </div>
74</body>
75</html>