GPT-5.4

Tiny Single Element Loading Animations
A 0.76T 0.18
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 Dash Flicker</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    background: #fff;
13    overflow: hidden;
14  }
15
16  .stage {
17    position: relative;
18    width: 100vw;
19    height: 100vh;
20    background: #ffffff;
21  }
22
23  /* Tiny mark in the upper-left, matching the frames */
24  .mark {
25    position: absolute;
26    left: 46px;
27    top: 56px;
28    width: 26px;
29    height: 3px;
30    transform-origin: left center;
31  }
32
33  .mark::before,
34  .mark::after {
35    content: "";
36    position: absolute;
37    top: 0;
38    height: 2px;
39    background: #2f2f2f;
40    border-radius: 1px;
41  }
42
43  /* left short dash */
44  .mark::before {
45    left: 0;
46    width: 10px;
47    opacity: 1;
48  }
49
50  /* right short dash flickers on/off */
51  .mark::after {
52    left: 15px;
53    width: 8px;
54    opacity: 0;
55    animation: blink 0.8s steps(1, end) infinite;
56  }
57
58  @keyframes blink {
59    0%, 24.999% { opacity: 0; }
60    25%, 49.999% { opacity: 1; }
61    50%, 74.999% { opacity: 0; }
62    75%, 100% { opacity: 1; }
63  }
64</style>
65</head>
66<body>
67  <div class="stage">
68    <div class="mark" aria-hidden="true"></div>
69  </div>
70</body>
71</html>