Claude Sonnet 4.6

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