model output
Claude Sonnet 4.6

Loaders (WIP)
A 0.92T 0.24
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    align-items: center;
20    justify-content: center;
21  }
22
23  .loader {
24    display: flex;
25    align-items: center;
26    justify-content: center;
27    gap: 8px;
28    position: absolute;
29    top: 12.5%;
30    left: 50%;
31    transform: translateX(-50%);
32  }
33
34  .dot {
35    width: 8px;
36    height: 8px;
37    background-color: white;
38    border-radius: 50%;
39    animation: dotPulse 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 dotPulse {
55    0%, 100% {
56      transform: scale(1);
57      opacity: 0.6;
58    }
59    30% {
60      transform: scale(1.4);
61      opacity: 1;
62    }
63    60% {
64      transform: scale(0.3);
65      opacity: 0.3;
66    }
67  }
68</style>
69</head>
70<body>
71  <div class="loader">
72    <div class="dot"></div>
73    <div class="dot"></div>
74    <div class="dot"></div>
75  </div>
76</body>
77</html>