model output
Claude Sonnet 4.6

flat loading animate
A 0.94T 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>Two Dots Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background: white;
16    display: flex;
17    justify-content: center;
18    align-items: center;
19    min-height: 100vh;
20    overflow: hidden;
21  }
22
23  .container {
24    position: relative;
25    width: 60px;
26    height: 60px;
27  }
28
29  .dot {
30    position: absolute;
31    width: 30px;
32    height: 30px;
33    border-radius: 50%;
34    left: 50%;
35    top: 50%;
36    transform: translate(-50%, -50%);
37  }
38
39  .dot-blue {
40    background-color: #29b8d8;
41    animation: rotateBlue 1.2s ease-in-out infinite;
42  }
43
44  .dot-red {
45    background-color: #f05a50;
46    animation: rotateRed 1.2s ease-in-out infinite;
47  }
48
49  @keyframes rotateBlue {
50    0% {
51      transform: translate(-50%, calc(-50% - 25px));
52    }
53    50% {
54      transform: translate(calc(-50% + 25px), -50%);
55    }
56    100% {
57      transform: translate(-50%, calc(-50% - 25px));
58    }
59  }
60
61  @keyframes rotateRed {
62    0% {
63      transform: translate(-50%, calc(-50% + 25px));
64    }
65    50% {
66      transform: translate(calc(-50% - 25px), -50%);
67    }
68    100% {
69      transform: translate(-50%, calc(-50% + 25px));
70    }
71  }
72</style>
73</head>
74<body>
75  <div class="container">
76    <div class="dot dot-blue"></div>
77    <div class="dot dot-red"></div>
78  </div>
79</body>
80</html>