model output
GPT-5.4

SVG Loading icons
A 0.82T 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>Minimal Orange Bars Loader</title>
7<style>
8  :root{
9    --bg:#2f3439;
10    --orange:#ff7a00;
11    --w:4px;
12    --h:18px;
13    --gap:6px;
14    --radius:1px;
15    --dur:0.9s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24  }
25
26  body{
27    position:relative;
28    font-family:sans-serif;
29  }
30
31  .loader{
32    position:absolute;
33    left:50%;
34    top:32px;
35    transform:translateX(-50%);
36    display:flex;
37    align-items:flex-start;
38    gap:var(--gap);
39    height:24px;
40  }
41
42  .bar{
43    width:var(--w);
44    height:var(--h);
45    background:var(--orange);
46    border-radius:var(--radius);
47    transform-origin:center top;
48    animation: pulse var(--dur) ease-in-out infinite;
49  }
50
51  .bar:nth-child(1){ animation-delay:-0.675s; }
52  .bar:nth-child(2){ animation-delay:-0.45s; }
53  .bar:nth-child(3){ animation-delay:-0.225s; }
54  .bar:nth-child(4){ animation-delay:0s; }
55
56  @keyframes pulse{
57    0%, 100%{
58      transform:scaleY(0.38);
59      opacity:1;
60    }
61    25%{
62      transform:scaleY(1);
63      opacity:1;
64    }
65    50%{
66      transform:scaleY(0.62);
67    }
68    75%{
69      transform:scaleY(0.82);
70    }
71  }
72</style>
73</head>
74<body>
75  <div class="loader" aria-label="loading">
76    <div class="bar"></div>
77    <div class="bar"></div>
78    <div class="bar"></div>
79    <div class="bar"></div>
80  </div>
81</body>
82</html>