model output
GPT-5.4

SVG Loading icons
A 0.88T 0.25
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>Three Bars Loader</title>
7<style>
8  :root{
9    --bg:#2f3439;
10    --bar:#ff7a12;
11    --w:4px;
12    --h:11px;
13    --gap:6px;
14    --dur:1.15s;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    overflow:hidden;
22    background:var(--bg);
23  }
24
25  body{
26    position:relative;
27    font-family:sans-serif;
28  }
29
30  .loader{
31    position:absolute;
32    left:50%;
33    top:32px;
34    width:calc(var(--w) * 3 + var(--gap) * 2);
35    height:28px;
36    transform:translateX(-50%);
37  }
38
39  .bar{
40    position:absolute;
41    top:0;
42    width:var(--w);
43    height:var(--h);
44    background:var(--bar);
45    border-radius:1px;
46    transform-origin:50% 50%;
47    animation: orbit var(--dur) ease-in-out infinite;
48  }
49
50  .bar:nth-child(1){ left:0; animation-delay:0s; }
51  .bar:nth-child(2){ left:calc(var(--w) + var(--gap)); animation-delay:calc(var(--dur) / -3); }
52  .bar:nth-child(3){ left:calc((var(--w) + var(--gap)) * 2); animation-delay:calc(var(--dur) * -2 / 3); }
53
54  @keyframes orbit{
55    0%{
56      transform:translate(0px,0px);
57    }
58    8.333%{
59      transform:translate(0px,0px);
60    }
61    16.666%{
62      transform:translate(0px,0px);
63    }
64    25%{
65      transform:translate(0px,0px);
66    }
67
68    /* top row */
69    33.333%{
70      transform:translate(0px,0px);
71    }
72    41.666%{
73      transform:translate(10px,0px);
74    }
75
76    /* right side down */
77    50%{
78      transform:translate(10px,10px);
79    }
80
81    /* bottom center */
82    58.333%{
83      transform:translate(0px,10px);
84    }
85
86    /* left side up */
87    66.666%{
88      transform:translate(-10px,10px);
89    }
90    75%{
91      transform:translate(-10px,0px);
92    }
93
94    /* return to top row */
95    83.333%{
96      transform:translate(0px,0px);
97    }
98    91.666%{
99      transform:translate(0px,0px);
100    }
101    100%{
102      transform:translate(0px,0px);
103    }
104  }
105</style>
106</head>
107<body>
108  <div class="loader" aria-label="loading animation">
109    <span class="bar"></span>
110    <span class="bar"></span>
111    <span class="bar"></span>
112  </div>
113</body>
114</html>