model output
Claude Sonnet 4.6

SVG Loading icons
A 0.82T 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>Bar Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #2e3b3e;
12    width: 100vw;
13    height: 100vh;
14    display: flex;
15    align-items: flex-start;
16    justify-content: center;
17  }
18
19  .bars-container {
20    display: flex;
21    gap: 3px;
22    align-items: flex-end;
23    margin-top: 28px;
24  }
25
26  .bar {
27    width: 4px;
28    background-color: #e07820;
29    border-radius: 1px;
30  }
31
32  .bar1 {
33    animation: bounce1 0.8s ease-in-out infinite alternate;
34  }
35
36  .bar2 {
37    animation: bounce2 0.8s ease-in-out infinite alternate;
38    animation-delay: 0.15s;
39  }
40
41  .bar3 {
42    animation: bounce3 0.8s ease-in-out infinite alternate;
43    animation-delay: 0.3s;
44  }
45
46  @keyframes bounce1 {
47    0% { height: 16px; }
48    100% { height: 6px; }
49  }
50
51  @keyframes bounce2 {
52    0% { height: 6px; }
53    100% { height: 16px; }
54  }
55
56  @keyframes bounce3 {
57    0% { height: 16px; }
58    100% { height: 6px; }
59  }
60</style>
61</head>
62<body>
63  <div class="bars-container">
64    <div class="bar bar1"></div>
65    <div class="bar bar2"></div>
66    <div class="bar bar3"></div>
67  </div>
68</body>
69</html>