model output
GPT-5.4

Animated Dot Loaders
A 0.92T 0.24
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 Loader Replica</title>
7<style>
8  :root{
9    --bg:#17141f;
10    --bg2:#241238;
11    --dot-dim: rgba(214,205,224,.38);
12    --dot-mid: rgba(232,226,238,.62);
13    --dot-bright: #f4f1f7;
14    --size: 20px;
15    --gap: 9px;
16    --dur: 1.6s;
17  }
18
19  html,body{
20    height:100%;
21    margin:0;
22  }
23
24  body{
25    display:grid;
26    place-items:center;
27    overflow:hidden;
28    background:
29      radial-gradient(circle at 50% 50%, rgba(63,24,98,.42) 0 16%, rgba(44,20,70,.28) 24%, rgba(28,18,43,.12) 42%, rgba(23,20,31,0) 62%),
30      linear-gradient(180deg, #1a1722 0%, #17141f 100%);
31    font-family: system-ui, sans-serif;
32  }
33
34  .loader{
35    position:relative;
36    width: calc(var(--size) * 5 + var(--gap) * 4);
37    height: var(--size);
38    display:flex;
39    align-items:center;
40    justify-content:center;
41    gap:var(--gap);
42    filter: blur(.15px);
43  }
44
45  .dot{
46    width:var(--size);
47    height:var(--size);
48    border-radius:50%;
49    background: var(--dot-dim);
50    box-shadow:
51      0 0 0 1px rgba(255,255,255,.02) inset,
52      0 0 10px rgba(255,255,255,.03);
53    animation: pulse var(--dur) linear infinite;
54  }
55
56  .dot:nth-child(1){ animation-delay: 0s; }
57  .dot:nth-child(2){ animation-delay: .12s; }
58  .dot:nth-child(3){ animation-delay: .24s; }
59  .dot:nth-child(4){ animation-delay: .36s; }
60  .dot:nth-child(5){ animation-delay: .48s; }
61
62  @keyframes pulse{
63    0%, 18%{
64      background: var(--dot-dim);
65      transform: scale(1);
66      opacity:.95;
67      box-shadow:
68        0 0 0 1px rgba(255,255,255,.02) inset,
69        0 0 10px rgba(255,255,255,.02);
70    }
71    28%, 42%{
72      background: var(--dot-mid);
73      transform: scale(1.02);
74      opacity:1;
75      box-shadow:
76        0 0 0 1px rgba(255,255,255,.03) inset,
77        0 0 12px rgba(255,255,255,.04);
78    }
79    50%, 66%{
80      background: var(--dot-bright);
81      transform: scale(1.06);
82      opacity:1;
83      box-shadow:
84        0 0 0 1px rgba(255,255,255,.08) inset,
85        0 0 14px rgba(255,255,255,.08);
86    }
87    78%, 100%{
88      background: var(--dot-dim);
89      transform: scale(1);
90      opacity:.95;
91      box-shadow:
92        0 0 0 1px rgba(255,255,255,.02) inset,
93        0 0 10px rgba(255,255,255,.02);
94    }
95  }
96
97  /* Slightly smaller on narrow screens to preserve proportions */
98  @media (max-width: 700px){
99    :root{
100      --size: 16px;
101      --gap: 7px;
102    }
103  }
104</style>
105</head>
106<body>
107  <div class="loader" aria-label="Loading" role="img">
108    <span class="dot"></span>
109    <span class="dot"></span>
110    <span class="dot"></span>
111    <span class="dot"></span>
112    <span class="dot"></span>
113  </div>
114</body>
115</html>