model output
GPT-5.4

SVG Loading icons
A 0.75T 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" />
6<title>Arc Loader Replica</title>
7<style>
8  :root{
9    --bg:#2f343a;
10    --orange:#f57c00;
11    --orange2:#ff8f1f;
12    --size:18px;
13    --stroke:4px;
14    --dur:1.45s;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    overflow:hidden;
22    background:var(--bg);
23  }
24
25  .stage{
26    position:relative;
27    width:100vw;
28    height:100vh;
29    background:var(--bg);
30  }
31
32  /* Positioned slightly below the top edge and centered, matching frames */
33  .loader{
34    position:absolute;
35    left:50%;
36    top:38px;
37    width:var(--size);
38    height:var(--size);
39    transform:translateX(-50%);
40  }
41
42  .arc{
43    position:absolute;
44    inset:0;
45    border-radius:50%;
46    box-sizing:border-box;
47    border:var(--stroke) solid transparent;
48    border-top-color:var(--orange);
49    border-right-color:var(--orange2);
50    filter: drop-shadow(0 0 0.2px rgba(255,160,40,.35));
51    animation: spin var(--dur) linear infinite;
52  }
53
54  /* subtle thickness/shape variation seen in frames */
55  .arc::after{
56    content:"";
57    position:absolute;
58    inset:calc(var(--stroke) * -1);
59    border-radius:50%;
60    border:var(--stroke) solid transparent;
61    border-top-color:rgba(255,140,20,.9);
62    transform:rotate(6deg);
63    opacity:.55;
64  }
65
66  @keyframes spin{
67    0%   { transform:rotate(-8deg); }
68    25%  { transform:rotate(82deg); }
69    50%  { transform:rotate(172deg); }
70    75%  { transform:rotate(262deg); }
71    100% { transform:rotate(352deg); }
72  }
73</style>
74</head>
75<body>
76  <div class="stage">
77    <div class="loader" aria-hidden="true">
78      <div class="arc"></div>
79    </div>
80  </div>
81</body>
82</html>