GPT-5.4

Tiny Single Element Loading Animations
A 0.91T 0.61
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>Minimal Spinner Replica</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --ring:#cfcfcf;
11    --dot:#cfcfcf;
12    --size:28px;
13    --stroke:2px;
14    --pad:16px;
15  }
16
17  html,body{
18    margin:0;
19    width:100%;
20    height:100%;
21    background:var(--bg);
22    overflow:hidden;
23    font-family:sans-serif;
24  }
25
26  .stage{
27    position:relative;
28    width:100%;
29    height:100%;
30    background:#fff;
31  }
32
33  .spinner{
34    position:absolute;
35    top:16px;
36    left:16px;
37    width:var(--size);
38    height:var(--size);
39    transform-origin:50% 50%;
40    animation: spin 1s linear infinite;
41  }
42
43  .ring{
44    position:absolute;
45    inset:0;
46    border-radius:50%;
47    border:var(--stroke) solid var(--ring);
48    box-sizing:border-box;
49  }
50
51  .dot{
52    position:absolute;
53    width:8px;
54    height:8px;
55    border-radius:50%;
56    background:var(--dot);
57    top:-1px;
58    left:3px;
59  }
60
61  @keyframes spin{
62    from{ transform:rotate(0deg); }
63    to{ transform:rotate(360deg); }
64  }
65</style>
66</head>
67<body>
68  <div class="stage">
69    <div class="spinner" aria-hidden="true">
70      <div class="ring"></div>
71      <div class="dot"></div>
72    </div>
73  </div>
74</body>
75</html>