model output
GPT-5.4

Thinking about SVG-preloaders
A 0.88T 0.31
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 Dot Loader</title>
7<style>
8  :root{
9    --bg:#050607;
10    --grid1:rgba(255,255,255,.035);
11    --grid2:rgba(255,255,255,.02);
12    --size:96px;
13    --dot:16px;
14    --radius:40px;
15    --count:12;
16    --dur:1.15s;
17  }
18
19  html,body{
20    margin:0;
21    width:100%;
22    height:100%;
23    overflow:hidden;
24    background:
25      linear-gradient(45deg, transparent 46%, var(--grid1) 47%, var(--grid1) 53%, transparent 54%) 0 0/20px 20px,
26      linear-gradient(-45deg, transparent 46%, var(--grid2) 47%, var(--grid2) 53%, transparent 54%) 0 0/20px 20px,
27      radial-gradient(circle at center, #07090a 0%, #040506 55%, #020304 100%);
28    font-family:sans-serif;
29  }
30
31  .stage{
32    position:fixed;
33    inset:0;
34    display:grid;
35    place-items:center;
36  }
37
38  .loader{
39    position:relative;
40    width:var(--size);
41    height:var(--size);
42    animation:spin var(--dur) linear infinite;
43    filter: drop-shadow(0 0 4px rgba(180,255,180,.06));
44  }
45
46  .dot{
47    position:absolute;
48    left:50%;
49    top:50%;
50    width:var(--dot);
51    height:var(--dot);
52    margin-left:calc(var(--dot) / -2);
53    margin-top:calc(var(--dot) / -2);
54    border-radius:50%;
55    transform:
56      rotate(calc(var(--i) * 30deg))
57      translateY(calc(var(--radius) * -1));
58    background:hsl(calc(42 + var(--i) * 11), 92%, calc(28% + var(--i) * 2.2%));
59    opacity:calc(.18 + var(--i) * .06);
60    box-shadow:
61      0 0 6px color-mix(in srgb, currentColor 45%, transparent);
62    animation:trail var(--dur) linear infinite;
63    animation-delay:calc(var(--i) * (-1 * var(--dur) / var(--count)));
64  }
65
66  @keyframes spin{
67    from{ transform:rotate(0deg); }
68    to{ transform:rotate(360deg); }
69  }
70
71  @keyframes trail{
72    0%{
73      opacity:1;
74      filter:brightness(1.25);
75      transform:
76        rotate(calc(var(--i) * 30deg))
77        translateY(calc(var(--radius) * -1))
78        scale(1.08);
79    }
80    18%{
81      opacity:.9;
82      filter:brightness(1.1);
83      transform:
84        rotate(calc(var(--i) * 30deg))
85        translateY(calc(var(--radius) * -1))
86        scale(1);
87    }
88    55%{
89      opacity:.42;
90      filter:brightness(.82);
91      transform:
92        rotate(calc(var(--i) * 30deg))
93        translateY(calc(var(--radius) * -1))
94        scale(.92);
95    }
96    100%{
97      opacity:.16;
98      filter:brightness(.65);
99      transform:
100        rotate(calc(var(--i) * 30deg))
101        translateY(calc(var(--radius) * -1))
102        scale(.86);
103    }
104  }
105</style>
106</head>
107<body>
108  <div class="stage">
109    <div class="loader" aria-label="Loading">
110      <span class="dot" style="--i:0"></span>
111      <span class="dot" style="--i:1"></span>
112      <span class="dot" style="--i:2"></span>
113      <span class="dot" style="--i:3"></span>
114      <span class="dot" style="--i:4"></span>
115      <span class="dot" style="--i:5"></span>
116      <span class="dot" style="--i:6"></span>
117      <span class="dot" style="--i:7"></span>
118      <span class="dot" style="--i:8"></span>
119      <span class="dot" style="--i:9"></span>
120      <span class="dot" style="--i:10"></span>
121      <span class="dot" style="--i:11"></span>
122    </div>
123  </div>
124</body>
125</html>