GPT-5.4

Tiny Single Element Loading Animations
A 0.81T 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" />
6<title>Minimal Orbit Stroke Animation</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --stroke:#d2d2d2;
11    --size:28px;
12    --ring:2px;
13    --arm-w:8px;
14    --arm-h:2px;
15    --dur:2.8s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24  }
25
26  .stage{
27    position:relative;
28    width:100vw;
29    height:100vh;
30    background:#fff;
31  }
32
33  /* top-left placement matching frames */
34  .icon{
35    position:absolute;
36    left:35px;
37    top:4px;
38    width:44px;
39    height:44px;
40  }
41
42  .ring{
43    position:absolute;
44    left:0;
45    top:0;
46    width:var(--size);
47    height:var(--size);
48    border:var(--ring) solid var(--stroke);
49    border-radius:50%;
50    box-sizing:border-box;
51  }
52
53  /* faint inner vertical tick visible in some frames */
54  .ring::after{
55    content:"";
56    position:absolute;
57    left:50%;
58    top:5px;
59    width:1.5px;
60    height:9px;
61    background:var(--stroke);
62    transform:translateX(-50%);
63    border-radius:1px;
64    opacity:.9;
65  }
66
67  .orbit{
68    position:absolute;
69    left:14px;
70    top:14px;
71    width:0;
72    height:0;
73    animation:spin var(--dur) linear infinite;
74  }
75
76  .arm{
77    position:absolute;
78    left:0;
79    top:0;
80    width:var(--arm-w);
81    height:var(--arm-h);
82    background:var(--stroke);
83    border-radius:2px;
84    transform-origin:0 50%;
85    transform:translateX(14px) rotate(18deg);
86  }
87
88  /* occasional second short stroke seen in later frames */
89  .arm.echo{
90    width:6px;
91    opacity:0;
92    animation:echo var(--dur) linear infinite;
93  }
94
95  @keyframes spin{
96    from{ transform:rotate(20deg); }
97    to{ transform:rotate(380deg); }
98  }
99
100  @keyframes echo{
101    0%,58%{ opacity:0; transform:translateX(14px) rotate(18deg); }
102    62%{ opacity:.95; transform:translateX(14px) rotate(8deg); }
103    70%{ opacity:.95; transform:translateX(14px) rotate(8deg); }
104    74%,100%{ opacity:0; transform:translateX(14px) rotate(8deg); }
105  }
106</style>
107</head>
108<body>
109  <div class="stage">
110    <div class="icon" aria-hidden="true">
111      <div class="ring"></div>
112      <div class="orbit">
113        <div class="arm"></div>
114        <div class="arm echo"></div>
115      </div>
116    </div>
117  </div>
118</body>
119</html>