model output
GPT-5.4

Spinners using Font Icons
A 0.82T 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>Rotating Loader Replica</title>
7<style>
8  :root{
9    --bg:#1b1b1b;
10    --white:#ffffff;
11    --size:58px;
12    --ring:18px;
13    --hole:20px;
14    --top-offset:38px;
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  .wrap{
32    position:absolute;
33    left:50%;
34    top:var(--top-offset);
35    transform:translateX(-50%);
36    width:var(--size);
37    height:var(--size);
38    filter:
39      drop-shadow(0 0 4px rgba(255,255,255,.55))
40      drop-shadow(0 0 10px rgba(255,255,255,.18));
41  }
42
43  .spinner{
44    width:100%;
45    height:100%;
46    border-radius:50%;
47    position:relative;
48    animation:spin var(--dur) linear infinite;
49    background:
50      conic-gradient(
51        from -90deg,
52        var(--white) 0deg 38deg,
53        transparent 38deg 52deg,
54        var(--white) 52deg 128deg,
55        transparent 128deg 142deg,
56        var(--white) 142deg 218deg,
57        transparent 218deg 232deg,
58        var(--white) 232deg 308deg,
59        transparent 308deg 322deg,
60        var(--white) 322deg 360deg
61      );
62    -webkit-mask:
63      radial-gradient(circle, transparent 0 calc(var(--hole) - 1px), #000 var(--hole) 100%);
64            mask:
65      radial-gradient(circle, transparent 0 calc(var(--hole) - 1px), #000 var(--hole) 100%);
66  }
67
68  .spinner::after{
69    content:"";
70    position:absolute;
71    inset:0;
72    border-radius:50%;
73    background:
74      radial-gradient(circle,
75        rgba(255,255,255,.18) 0 44%,
76        rgba(255,255,255,0) 66%);
77    transform:scale(1.35);
78    z-index:-1;
79    filter:blur(4px);
80  }
81
82  @keyframes spin{
83    from{ transform:rotate(0deg); }
84    to{ transform:rotate(360deg); }
85  }
86</style>
87</head>
88<body>
89  <div class="wrap">
90    <div class="spinner"></div>
91  </div>
92</body>
93</html>