model output
GPT-5.4

CSS3 loading animations
A 0.82T 0.22
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>Dot Fill Loader</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --off:#050505;
11    --off-ring:#3a3a3a;
12    --on:#49a9ff;
13    --on2:#7fd0ff;
14    --size:8px;
15    --gap:4px;
16    --duration:2.4s;
17  }
18
19  html,body{
20    margin:0;
21    width:100%;
22    height:100%;
23    background:var(--bg);
24    overflow:hidden;
25    font-family:sans-serif;
26  }
27
28  .stage{
29    position:relative;
30    width:100%;
31    height:100%;
32  }
33
34  .loader{
35    position:absolute;
36    left:50%;
37    top:46px;
38    transform:translateX(-50%);
39    display:flex;
40    gap:var(--gap);
41  }
42
43  .dot{
44    width:var(--size);
45    height:var(--size);
46    border-radius:50%;
47    box-sizing:border-box;
48    background:
49      radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), rgba(255,255,255,0) 38%),
50      radial-gradient(circle at 50% 50%, #0a0a0a 0 58%, #000 72%, #000 100%);
51    border:1px solid var(--off-ring);
52    box-shadow:
53      inset 0 0 0 1px rgba(255,255,255,.03),
54      0 0 0 1px rgba(0,0,0,.35);
55    animation: fill var(--duration) linear infinite both;
56  }
57
58  .dot:nth-child(1){ animation-delay:0s; }
59  .dot:nth-child(2){ animation-delay:.18s; }
60  .dot:nth-child(3){ animation-delay:.36s; }
61  .dot:nth-child(4){ animation-delay:.54s; }
62  .dot:nth-child(5){ animation-delay:.72s; }
63
64  @keyframes fill{
65    0%, 18%{
66      background:
67        radial-gradient(circle at 35% 35%, rgba(255,255,255,.18), rgba(255,255,255,0) 38%),
68        radial-gradient(circle at 50% 50%, #0a0a0a 0 58%, #000 72%, #000 100%);
69      border-color:var(--off-ring);
70      box-shadow:
71        inset 0 0 0 1px rgba(255,255,255,.03),
72        0 0 0 1px rgba(0,0,0,.35);
73      transform:scale(1);
74    }
75    22%, 100%{
76      background:
77        radial-gradient(circle at 35% 35%, rgba(255,255,255,.55), rgba(255,255,255,0) 34%),
78        radial-gradient(circle at 50% 45%, var(--on2) 0 18%, var(--on) 45%, #1f86ea 72%, #0f5fb8 100%);
79      border-color:#6bbcff;
80      box-shadow:
81        0 0 6px rgba(73,169,255,.45),
82        inset 0 0 2px rgba(255,255,255,.35);
83      transform:scale(1);
84    }
85  }
86</style>
87</head>
88<body>
89  <div class="stage">
90    <div class="loader" aria-label="loading">
91      <span class="dot"></span>
92      <span class="dot"></span>
93      <span class="dot"></span>
94      <span class="dot"></span>
95      <span class="dot"></span>
96    </div>
97  </div>
98</body>
99</html>