model output
GPT-5.4

SVG Loading icons
A 0.90T 0.30
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>Minimal Equalizer Loader</title>
7<style>
8  :root{
9    --bg:#2f343a;
10    --bar:#ff7a00;
11    --w:4px;
12    --gap:6px;
13    --h1:10px;
14    --h2:18px;
15    --h3:14px;
16    --dur:0.9s;
17  }
18
19  html,body{
20    margin:0;
21    width:100%;
22    height:100%;
23    overflow:hidden;
24    background:var(--bg);
25  }
26
27  body{
28    position:relative;
29    font-family:system-ui,sans-serif;
30  }
31
32  .loader{
33    position:absolute;
34    left:50%;
35    top:42px;
36    transform:translateX(-50%);
37    display:flex;
38    align-items:center;
39    gap:var(--gap);
40    height:22px;
41  }
42
43  .bar{
44    width:var(--w);
45    background:var(--bar);
46    border-radius:1px;
47    transform-origin:center bottom;
48    animation: pulse var(--dur) ease-in-out infinite;
49  }
50
51  .bar:nth-child(1){ animation-delay:0s; }
52  .bar:nth-child(2){ animation-delay:0.15s; }
53  .bar:nth-child(3){ animation-delay:0.3s; }
54
55  @keyframes pulse{
56    0%, 100% { height:10px; }
57    20%      { height:16px; }
58    40%      { height:8px; }
59    60%      { height:18px; }
60    80%      { height:11px; }
61  }
62
63  /* Slightly different motion per bar to match the uneven frame sequence */
64  .bar:nth-child(1){
65    animation-name:pulse1;
66  }
67  .bar:nth-child(2){
68    animation-name:pulse2;
69  }
70  .bar:nth-child(3){
71    animation-name:pulse3;
72  }
73
74  @keyframes pulse1{
75    0%,100% { height:10px; }
76    12%     { height:16px; }
77    28%     { height:8px; }
78    48%     { height:18px; }
79    68%     { height:11px; }
80    84%     { height:15px; }
81  }
82
83  @keyframes pulse2{
84    0%,100% { height:14px; }
85    16%     { height:8px; }
86    34%     { height:17px; }
87    52%     { height:10px; }
88    72%     { height:18px; }
89    88%     { height:12px; }
90  }
91
92  @keyframes pulse3{
93    0%,100% { height:10px; }
94    18%     { height:18px; }
95    36%     { height:11px; }
96    56%     { height:16px; }
97    76%     { height:8px; }
98    90%     { height:14px; }
99  }
100</style>
101</head>
102<body>
103  <div class="loader" aria-label="loading animation">
104    <div class="bar"></div>
105    <div class="bar"></div>
106    <div class="bar"></div>
107  </div>
108</body>
109</html>