model output
Claude Sonnet 4.6

SVG Loading icons
A 0.89T 0.28
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    padding-top: 40px;
18  }
19
20  .bars {
21    display: flex;
22    align-items: flex-end;
23    gap: 2px;
24    height: 16px;
25  }
26
27  .bar {
28    width: 3px;
29    background-color: #e85d00;
30    border-radius: 1px;
31  }
32
33  @keyframes bar1 {
34    0%   { height: 3px; }
35    25%  { height: 12px; }
36    50%  { height: 6px; }
37    75%  { height: 14px; }
38    100% { height: 3px; }
39  }
40
41  @keyframes bar2 {
42    0%   { height: 12px; }
43    25%  { height: 4px; }
44    50%  { height: 14px; }
45    75%  { height: 3px; }
46    100% { height: 12px; }
47  }
48
49  @keyframes bar3 {
50    0%   { height: 6px; }
51    25%  { height: 14px; }
52    50%  { height: 3px; }
53    75%  { height: 10px; }
54    100% { height: 6px; }
55  }
56
57  .bar:nth-child(1) {
58    animation: bar1 1.2s ease-in-out infinite;
59  }
60
61  .bar:nth-child(2) {
62    animation: bar2 1.2s ease-in-out infinite;
63    animation-delay: -0.4s;
64  }
65
66  .bar:nth-child(3) {
67    animation: bar3 1.2s ease-in-out infinite;
68    animation-delay: -0.8s;
69  }
70</style>
71</head>
72<body>
73  <div class="bars">
74    <div class="bar"></div>
75    <div class="bar"></div>
76    <div class="bar"></div>
77  </div>
78</body>
79</html>