model output
Claude Sonnet 4.6

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