model output
Claude Sonnet 4.6

flat loading animate
A 0.92T 0.15
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>Loading Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background: #ffffff;
16    display: flex;
17    justify-content: center;
18    align-items: center;
19    min-height: 100vh;
20  }
21
22  .loader {
23    display: flex;
24    align-items: center;
25    gap: 6px;
26  }
27
28  .dot {
29    width: 18px;
30    height: 18px;
31    border-radius: 50%;
32    background-color: #1ab8d4;
33    animation: pulse 1.2s ease-in-out infinite;
34  }
35
36  .dot:nth-child(1) {
37    animation-delay: 0s;
38  }
39
40  .dot:nth-child(2) {
41    animation-delay: 0.15s;
42  }
43
44  .dot:nth-child(3) {
45    animation-delay: 0.3s;
46  }
47
48  .dot:nth-child(4) {
49    animation-delay: 0.45s;
50  }
51
52  @keyframes pulse {
53    0%, 100% {
54      background-color: #1ab8d4;
55      opacity: 1;
56      transform: scale(1);
57    }
58    50% {
59      background-color: #d6f3f8;
60      opacity: 0.4;
61      transform: scale(0.85);
62    }
63  }
64</style>
65</head>
66<body>
67  <div class="loader">
68    <div class="dot"></div>
69    <div class="dot"></div>
70    <div class="dot"></div>
71    <div class="dot"></div>
72  </div>
73</body>
74</html>