model output
Claude Sonnet 4.6

Animated Dot Loaders
A 0.93T 0.16
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>Dot Loader</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9
10  body {
11    width: 100vw;
12    height: 100vh;
13    background: radial-gradient(ellipse at center, #1a0a2e 0%, #0d0d1a 60%, #0a0a14 100%);
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    overflow: hidden;
18  }
19
20  .glow-circle {
21    position: absolute;
22    width: 320px;
23    height: 320px;
24    border-radius: 50%;
25    background: radial-gradient(ellipse at center, rgba(80, 20, 120, 0.35) 0%, transparent 70%);
26    border: 1px solid rgba(80, 30, 100, 0.2);
27  }
28
29  .dots-container {
30    display: flex;
31    align-items: center;
32    gap: 10px;
33    position: relative;
34    z-index: 1;
35  }
36
37  .dot {
38    width: 14px;
39    height: 14px;
40    border-radius: 50%;
41    background: #6b6880;
42  }
43
44  .dot.active {
45    background: #ffffff;
46    animation: bounce 0.6s ease-in-out;
47  }
48
49  @keyframes bounce {
50    0%   { transform: translateY(0); background: #ffffff; }
51    30%  { transform: translateY(-12px); background: #ffffff; }
52    60%  { transform: translateY(0); background: #ffffff; }
53    100% { transform: translateY(0); background: #ffffff; }
54  }
55</style>
56</head>
57<body>
58  <div class="glow-circle"></div>
59  <div class="dots-container">
60    <div class="dot" id="dot0"></div>
61    <div class="dot" id="dot1"></div>
62    <div class="dot" id="dot2"></div>
63    <div class="dot" id="dot3"></div>
64    <div class="dot" id="dot4"></div>
65  </div>
66
67<script>
68  const dots = document.querySelectorAll('.dot');
69  let current = 0;
70  const total = dots.length;
71  const interval = 400;
72
73  function activateDot(index) {
74    dots.forEach(d => {
75      d.classList.remove('active');
76      d.style.animation = 'none';
77      d.offsetHeight; // reflow
78    });
79    dots[index].classList.add('active');
80    dots[index].style.animation = '';
81  }
82
83  activateDot(current);
84
85  setInterval(() => {
86    current = (current + 1) % total;
87    activateDot(current);
88  }, interval);
89</script>
90</body>
91</html>