Claude Sonnet 4.6

Tiny Single Element Loading Animations
A 0.89T 0.31
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>Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: #ffffff;
12    width: 100vw;
13    height: 100vh;
14    overflow: hidden;
15  }
16
17  .container {
18    position: absolute;
19    top: 52px;
20    left: 40px;
21    display: flex;
22    align-items: center;
23    gap: 6px;
24  }
25
26  .dash {
27    height: 2px;
28    background: #1a1a1a;
29    border-radius: 1px;
30  }
31
32  .dash1 {
33    width: 18px;
34    animation: dash1anim 1.2s ease-in-out infinite;
35  }
36
37  .dash2 {
38    width: 10px;
39    animation: dash2anim 1.2s ease-in-out infinite;
40  }
41
42  @keyframes dash1anim {
43    0%   { opacity: 1; transform: translateX(0); }
44    25%  { opacity: 1; transform: translateX(0); }
45    50%  { opacity: 1; transform: translateX(0); }
46    75%  { opacity: 1; transform: translateX(0); }
47    100% { opacity: 1; transform: translateX(0); }
48  }
49
50  @keyframes dash2anim {
51    0%   { opacity: 0; transform: translateX(-4px); }
52    20%  { opacity: 1; transform: translateX(0); }
53    50%  { opacity: 1; transform: translateX(0); }
54    80%  { opacity: 1; transform: translateX(0); }
55    100% { opacity: 0; transform: translateX(-4px); }
56  }
57</style>
58</head>
59<body>
60  <div class="container">
61    <div class="dash dash1"></div>
62    <div class="dash dash2"></div>
63  </div>
64</body>
65</html>