model output
Claude Sonnet 4.6

flat loading animate
A 0.95T 0.49
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>Dot Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background: #fff;
16    display: flex;
17    justify-content: center;
18    align-items: center;
19    height: 100vh;
20  }
21
22  .container {
23    display: flex;
24    align-items: center;
25    gap: 4px;
26  }
27
28  .dot {
29    border-radius: 50%;
30    display: block;
31  }
32
33  .dot-red {
34    background-color: #f05a5a;
35    width: 40px;
36    height: 40px;
37    animation: pulse-red 1.2s ease-in-out infinite;
38  }
39
40  .dot-blue {
41    background-color: #00aacc;
42    width: 40px;
43    height: 40px;
44    animation: pulse-blue 1.2s ease-in-out infinite;
45  }
46
47  @keyframes pulse-red {
48    0%   { transform: scale(1); }
49    50%  { transform: scale(0.5); }
50    100% { transform: scale(1); }
51  }
52
53  @keyframes pulse-blue {
54    0%   { transform: scale(0.5); }
55    50%  { transform: scale(1); }
56    100% { transform: scale(0.5); }
57  }
58</style>
59</head>
60<body>
61  <div class="container">
62    <div class="dot dot-red"></div>
63    <div class="dot dot-blue"></div>
64  </div>
65</body>
66</html>