model output
Claude Sonnet 4.6

Loaders (WIP)
A 0.94T 0.28
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: #e8473a;
16    width: 100vw;
17    height: 100vh;
18    display: flex;
19    justify-content: center;
20    align-items: flex-start;
21    padding-top: 97px;
22  }
23
24  .dots-container {
25    display: flex;
26    gap: 12px;
27    align-items: center;
28  }
29
30  .dot {
31    width: 8px;
32    height: 8px;
33    border-radius: 50%;
34    background-color: rgba(255, 255, 255, 0.5);
35  }
36
37  .dot:nth-child(1) {
38    animation: pulse 1.2s ease-in-out infinite;
39    animation-delay: 0s;
40  }
41
42  .dot:nth-child(2) {
43    animation: pulse 1.2s ease-in-out infinite;
44    animation-delay: 0.4s;
45  }
46
47  .dot:nth-child(3) {
48    animation: pulse 1.2s ease-in-out infinite;
49    animation-delay: 0.8s;
50  }
51
52  @keyframes pulse {
53    0%, 100% {
54      background-color: rgba(255, 255, 255, 0.35);
55    }
56    50% {
57      background-color: rgba(255, 255, 255, 0.95);
58    }
59  }
60</style>
61</head>
62<body>
63  <div class="dots-container">
64    <div class="dot"></div>
65    <div class="dot"></div>
66    <div class="dot"></div>
67  </div>
68</body>
69</html>