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>Minimal Triple Bar Animation</title>
7<style>
8  :root{
9    --bg:#2f3439;
10    --bar:#f57c1f;
11    --shadow:#8a4a18;
12    --w:4px;
13    --h:20px;
14    --gap:4px;
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  .mark{
31    position:absolute;
32    left:50%;
33    top:32px;
34    transform:translateX(-50%);
35    display:flex;
36    gap:var(--gap);
37    align-items:flex-start;
38    justify-content:center;
39  }
40
41  .bar{
42    width:var(--w);
43    height:var(--h);
44    background:var(--bar);
45    box-shadow:1px 0 0 var(--shadow);
46    transform-origin:center center;
47    animation: drift 2.8s ease-in-out infinite;
48  }
49
50  .bar:nth-child(2){ animation-delay:-0.08s; }
51  .bar:nth-child(3){ animation-delay:-0.16s; }
52
53  @keyframes drift{
54    0%,100%{
55      transform:translateY(0);
56      opacity:1;
57    }
58    50%{
59      transform:translateY(-1px);
60      opacity:1;
61    }
62  }
63</style>
64</head>
65<body>
66  <div class="mark" aria-hidden="true">
67    <div class="bar"></div>
68    <div class="bar"></div>
69    <div class="bar"></div>
70  </div>
71</body>
72</html>