GPT-5.4

Tiny Single Element Loading Animations
A 0.92T 0.29
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>Three Dot Loader</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --dot-dark:#4a4a4a;
11    --dot-light:#c9c9c9;
12    --size:6px;
13    --gap:6px;
14  }
15
16  html,body{
17    margin:0;
18    width:100%;
19    height:100%;
20    background:var(--bg);
21    overflow:hidden;
22    font-family:sans-serif;
23  }
24
25  .stage{
26    position:relative;
27    width:100%;
28    height:100%;
29    background:#fff;
30  }
31
32  .loader{
33    position:absolute;
34    top:54px;
35    left:42px;
36    display:flex;
37    gap:var(--gap);
38    align-items:center;
39  }
40
41  .dot{
42    width:var(--size);
43    height:var(--size);
44    border-radius:50%;
45    background:var(--dot-light);
46    animation: pulse 1.25s steps(1, end) infinite;
47  }
48
49  .dot:nth-child(1){ animation-delay: 0s; }
50  .dot:nth-child(2){ animation-delay: 0.4167s; }
51  .dot:nth-child(3){ animation-delay: 0.8334s; }
52
53  @keyframes pulse{
54    0%, 20%   { background: var(--dot-dark); }
55    20.01%,100% { background: var(--dot-light); }
56  }
57</style>
58</head>
59<body>
60  <div class="stage">
61    <div class="loader" aria-label="loading">
62      <span class="dot"></span>
63      <span class="dot"></span>
64      <span class="dot"></span>
65    </div>
66  </div>
67</body>
68</html>