model output
Claude Sonnet 4.6

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