GPT-5.4

Tiny Single Element Loading Animations
A 0.89T 0.23
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 Ring Animation</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    overflow: hidden;
13    background: #fff;
14  }
15
16  .stage {
17    position: relative;
18    width: 100vw;
19    height: 100vh;
20    background: #ffffff;
21  }
22
23  /* Small outlined circle positioned near top-left exactly like the frames */
24  .ring {
25    position: absolute;
26    left: 44px;
27    top: 45px;
28    width: 24px;
29    height: 24px;
30    border: 2px solid #222;
31    border-radius: 50%;
32    box-sizing: border-box;
33    background: transparent;
34    transform-origin: center;
35    animation: subtleDrift 2s linear infinite;
36  }
37
38  /* Very slight motion inferred from the frame sequence */
39  @keyframes subtleDrift {
40    0%   { transform: translate(0px, 0px); }
41    33%  { transform: translate(0px, 0px); }
42    66%  { transform: translate(1px, 0px); }
43    100% { transform: translate(1px, 1px); }
44  }
45</style>
46</head>
47<body>
48  <div class="stage">
49    <div class="ring"></div>
50  </div>
51
52  <script>
53    // No JS required; animation is purely CSS.
54  </script>
55</body>
56</html>