model output
Claude Sonnet 4.6

CSS3 loading animations
A 0.86T 0.25
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 Dots</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #111;
12    width: 100vw;
13    height: 100vh;
14    display: flex;
15    align-items: flex-start;
16    justify-content: center;
17    padding-top: 47px;
18  }
19
20  .dots-container {
21    display: flex;
22    gap: 4px;
23    align-items: center;
24  }
25
26  .dot {
27    width: 5px;
28    height: 5px;
29    border-radius: 50%;
30    background-color: #1a6a8a;
31    animation: dotLight 1.5s ease-in-out infinite;
32  }
33
34  .dot:nth-child(1) { animation-delay: 0s; }
35  .dot:nth-child(2) { animation-delay: 0.15s; }
36  .dot:nth-child(3) { animation-delay: 0.3s; }
37  .dot:nth-child(4) { animation-delay: 0.45s; }
38  .dot:nth-child(5) { animation-delay: 0.6s; }
39
40  @keyframes dotLight {
41    0%, 100% {
42      background-color: #1a3a4a;
43      box-shadow: none;
44    }
45    30%, 60% {
46      background-color: #2a9fd0;
47      box-shadow: 0 0 4px #2a9fd0, 0 0 8px rgba(42, 159, 208, 0.5);
48    }
49  }
50</style>
51</head>
52<body>
53  <div class="dots-container">
54    <div class="dot"></div>
55    <div class="dot"></div>
56    <div class="dot"></div>
57    <div class="dot"></div>
58    <div class="dot"></div>
59  </div>
60</body>
61</html>