model output
GPT-5.4

SVG Loading icons
A 0.84T 0.29
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 Triple Bar Loader</title>
7<style>
8  :root{
9    --bg:#2f363b;
10    --orange:#d86f17;
11    --orange-dim:rgba(216,111,23,.28);
12    --w:4px;
13    --h:18px;
14    --gap:5px;
15    --dur:1.05s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    overflow:hidden;
23    background:var(--bg);
24  }
25
26  body{
27    position:relative;
28    font-family:sans-serif;
29  }
30
31  .loader{
32    position:absolute;
33    left:50%;
34    top:42px;
35    transform:translateX(-50%);
36    display:flex;
37    gap:var(--gap);
38    align-items:center;
39    justify-content:center;
40  }
41
42  .bar{
43    width:var(--w);
44    height:var(--h);
45    border-radius:1px;
46    background:linear-gradient(to bottom,
47      rgba(255,170,70,.18) 0%,
48      var(--orange) 18%,
49      var(--orange) 82%,
50      rgba(120,55,10,.55) 100%);
51    transform-origin:center center;
52    opacity:.95;
53    animation:pulse var(--dur) linear infinite;
54    box-shadow:0 0 0 0.2px rgba(255,140,40,.25);
55  }
56
57  .bar:nth-child(1){ animation-delay:0s; }
58  .bar:nth-child(2){ animation-delay:.14s; }
59  .bar:nth-child(3){ animation-delay:.28s; }
60
61  @keyframes pulse{
62    0%, 100%{
63      opacity:.28;
64      transform:scaleY(.78);
65      filter:brightness(.72);
66    }
67    16%{
68      opacity:.45;
69      transform:scaleY(.88);
70      filter:brightness(.85);
71    }
72    34%{
73      opacity:1;
74      transform:scaleY(1.08);
75      filter:brightness(1.18);
76    }
77    50%{
78      opacity:.92;
79      transform:scaleY(1);
80      filter:brightness(1.05);
81    }
82    68%{
83      opacity:.5;
84      transform:scaleY(.86);
85      filter:brightness(.82);
86    }
87    84%{
88      opacity:.3;
89      transform:scaleY(.78);
90      filter:brightness(.72);
91    }
92  }
93</style>
94</head>
95<body>
96  <div class="loader" aria-label="loading">
97    <span class="bar"></span>
98    <span class="bar"></span>
99    <span class="bar"></span>
100  </div>
101</body>
102</html>