model output
Claude Sonnet 4.6

CSS3 loading animations
A 0.81T 0.27
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-color: #0a0a0a;
16    display: flex;
17    justify-content: center;
18    align-items: flex-start;
19    min-height: 100vh;
20    padding-top: 10px;
21  }
22
23  .loader {
24    display: flex;
25    gap: 3px;
26    margin-top: 8px;
27  }
28
29  .dot {
30    width: 8px;
31    height: 8px;
32    background-color: #4a9e4a;
33    border-radius: 1px;
34    animation: blink 1.2s ease-in-out infinite;
35  }
36
37  .dot:nth-child(1) { animation-delay: 0s; }
38  .dot:nth-child(2) { animation-delay: 0.2s; }
39  .dot:nth-child(3) { animation-delay: 0.4s; }
40  .dot:nth-child(4) { animation-delay: 0.6s; }
41  .dot:nth-child(5) { animation-delay: 0.8s; }
42
43  @keyframes blink {
44    0%, 100% {
45      opacity: 1;
46      background-color: #6ddd6d;
47    }
48    50% {
49      opacity: 0.15;
50      background-color: #2a5a2a;
51    }
52  }
53</style>
54</head>
55<body>
56  <div class="loader">
57    <div class="dot"></div>
58    <div class="dot"></div>
59    <div class="dot"></div>
60    <div class="dot"></div>
61    <div class="dot"></div>
62  </div>
63</body>
64</html>