GPT-5.4

Tiny Single Element Loading Animations
A 0.95T 0.27
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>Subtle Pulsing Dot</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    overflow: hidden;
13    background: #ffffff;
14  }
15
16  .stage {
17    position: relative;
18    width: 100vw;
19    height: 100vh;
20    background: #fff;
21  }
22
23  .dot {
24    position: absolute;
25    left: 4.6vw;
26    top: 6.5vh;
27    width: 1.9vw;
28    height: 1.9vw;
29    min-width: 16px;
30    min-height: 16px;
31    max-width: 22px;
32    max-height: 22px;
33    border-radius: 50%;
34    background: #d9d9d9;
35    opacity: 0.95;
36    animation: pulseFade 2.4s ease-in-out infinite;
37    transform-origin: center;
38    box-shadow: 0 0 0 0 rgba(217,217,217,0.18);
39  }
40
41  @keyframes pulseFade {
42    0% {
43      transform: scale(0.72);
44      opacity: 0.95;
45      background: #cfcfcf;
46      box-shadow: 0 0 0 0 rgba(217,217,217,0.10);
47    }
48    18% {
49      transform: scale(1);
50      opacity: 0.42;
51      background: #ececec;
52      box-shadow: 0 0 0 2px rgba(230,230,230,0.08);
53    }
54    38% {
55      transform: scale(1.08);
56      opacity: 0.16;
57      background: #f5f5f5;
58      box-shadow: 0 0 0 4px rgba(240,240,240,0.04);
59    }
60    52% {
61      transform: scale(1.1);
62      opacity: 0.03;
63      background: #fafafa;
64      box-shadow: 0 0 0 5px rgba(245,245,245,0.02);
65    }
66    53% {
67      transform: scale(0.72);
68      opacity: 0.95;
69      background: #cfcfcf;
70      box-shadow: 0 0 0 0 rgba(217,217,217,0.10);
71    }
72    72% {
73      transform: scale(1);
74      opacity: 0.42;
75      background: #ececec;
76      box-shadow: 0 0 0 2px rgba(230,230,230,0.08);
77    }
78    90% {
79      transform: scale(1.08);
80      opacity: 0.16;
81      background: #f5f5f5;
82      box-shadow: 0 0 0 4px rgba(240,240,240,0.04);
83    }
84    100% {
85      transform: scale(1.1);
86      opacity: 0.03;
87      background: #fafafa;
88      box-shadow: 0 0 0 5px rgba(245,245,245,0.02);
89    }
90  }
91</style>
92</head>
93<body>
94  <div class="stage">
95    <div class="dot"></div>
96  </div>
97</body>
98</html>