model output
GPT-5.4

SVG Loading icons
A 0.90T 0.32
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 Arc Spinner</title>
7<style>
8  :root{
9    --bg:#2f343a;
10    --orange:#f57c00;
11    --size:28px;
12    --stroke:4px;
13    --dur:1.05s;
14  }
15
16  html,body{
17    margin:0;
18    width:100%;
19    height:100%;
20    overflow:hidden;
21    background:var(--bg);
22  }
23
24  body{
25    position:relative;
26    font-family:sans-serif;
27  }
28
29  .spinner{
30    position:absolute;
31    left:50%;
32    top:38px;
33    width:var(--size);
34    height:var(--size);
35    transform:translateX(-50%);
36  }
37
38  .arc{
39    width:100%;
40    height:100%;
41    border-radius:50%;
42    box-sizing:border-box;
43    border:var(--stroke) solid transparent;
44    border-top-color:var(--orange);
45    border-right-color:var(--orange);
46    animation: spin var(--dur) linear infinite;
47    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
48  }
49
50  @keyframes spin{
51    0%   { transform:rotate(-45deg); }
52    12.5%{ transform:rotate(0deg); }
53    25%  { transform:rotate(45deg); }
54    37.5%{ transform:rotate(90deg); }
55    50%  { transform:rotate(135deg); }
56    62.5%{ transform:rotate(180deg); }
57    75%  { transform:rotate(225deg); }
58    87.5%{ transform:rotate(270deg); }
59    100% { transform:rotate(315deg); }
60  }
61</style>
62</head>
63<body>
64  <div class="spinner" aria-hidden="true">
65    <div class="arc"></div>
66  </div>
67</body>
68</html>