model output
GPT-5.4

SVG Loading icons
A 0.87T 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 Rotating Ring Loader</title>
7<style>
8  :root{
9    --bg:#2f363b;
10    --ring:#5a3a22;
11    --glow:#ff7a00;
12    --size:28px;
13    --stroke:3px;
14    --arc:26deg;
15    --dur:1.15s;
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:18px;
35    width:var(--size);
36    height:var(--size);
37    transform:translateX(-50%);
38  }
39
40  .ring,
41  .arc{
42    position:absolute;
43    inset:0;
44    border-radius:50%;
45    box-sizing:border-box;
46  }
47
48  .ring{
49    border:var(--stroke) solid rgba(90,58,34,.9);
50    box-shadow:
51      0 0 0 1px rgba(255,122,0,.03) inset,
52      0 0 4px rgba(255,122,0,.08);
53    opacity:.95;
54  }
55
56  .arc{
57    animation:spin var(--dur) linear infinite;
58  }
59
60  .arc::before{
61    content:"";
62    position:absolute;
63    inset:0;
64    border-radius:50%;
65    box-sizing:border-box;
66    border:var(--stroke) solid transparent;
67    border-top-color:var(--glow);
68    transform:rotate(-8deg);
69    filter:
70      drop-shadow(0 0 1px rgba(255,140,40,.9))
71      drop-shadow(0 0 2px rgba(255,122,0,.35));
72  }
73
74  @keyframes spin{
75    from{ transform:rotate(0deg); }
76    to{ transform:rotate(360deg); }
77  }
78</style>
79</head>
80<body>
81  <div class="loader" aria-label="loading animation">
82    <div class="ring"></div>
83    <div class="arc"></div>
84  </div>
85</body>
86</html>