model output
GPT-5.4

Thinking about SVG-preloaders
A 0.90T 0.33
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    --blue: 40,136,245;
13    --size: 96px;
14    --dot: 18px;
15    --radius: 44px;
16    --count: 10;
17    --dur: 1s;
18  }
19
20  html,body{
21    height:100%;
22    margin:0;
23  }
24
25  body{
26    display:grid;
27    place-items:center;
28    overflow:hidden;
29    background:
30      repeating-linear-gradient(45deg,var(--grid1) 0 1px,transparent 1px 12px),
31      repeating-linear-gradient(-45deg,var(--grid2) 0 1px,transparent 1px 12px),
32      radial-gradient(circle at 50% 50%, #07090b 0%, var(--bg) 65%, #030405 100%);
33    font-family:system-ui,sans-serif;
34  }
35
36  .loader{
37    position:relative;
38    width:var(--size);
39    height:var(--size);
40    transform: rotate(-8deg);
41  }
42
43  .dot{
44    position:absolute;
45    left:50%;
46    top:50%;
47    width:var(--dot);
48    height:var(--dot);
49    margin:calc(var(--dot) / -2);
50    border-radius:50%;
51    background: rgb(var(--blue));
52    transform:
53      rotate(calc(var(--i) * 36deg))
54      translateY(calc(var(--radius) * -1));
55    animation: fade var(--dur) linear infinite;
56    animation-delay: calc(var(--i) * -0.1s);
57    box-shadow: 0 0 8px rgba(var(--blue), .08);
58  }
59
60  @keyframes fade{
61    0%   { opacity: 1; }
62    12%  { opacity: .95; }
63    35%  { opacity: .55; }
64    60%  { opacity: .22; }
65    85%  { opacity: .08; }
66    100% { opacity: .04; }
67  }
68</style>
69</head>
70<body>
71  <div class="loader" aria-label="Loading" role="img">
72    <span class="dot" style="--i:0"></span>
73    <span class="dot" style="--i:1"></span>
74    <span class="dot" style="--i:2"></span>
75    <span class="dot" style="--i:3"></span>
76    <span class="dot" style="--i:4"></span>
77    <span class="dot" style="--i:5"></span>
78    <span class="dot" style="--i:6"></span>
79    <span class="dot" style="--i:7"></span>
80    <span class="dot" style="--i:8"></span>
81    <span class="dot" style="--i:9"></span>
82  </div>
83</body>
84</html>