GPT-5.4

CirclePath 1 v4 Loading Animation
A 0.80T 0.19
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>Dot Loader Replica</title>
7<style>
8  :root{
9    --bg:#000;
10    --dot:#b9b9b9;
11    --trail:#4a4a4a;
12    --trail2:#171717;
13    --size:30px;
14    --radius:42px;
15    --duration:1.25s;
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24  }
25
26  body{
27    display:grid;
28    place-items:center;
29  }
30
31  .loader{
32    position:relative;
33    width:140px;
34    height:140px;
35  }
36
37  .dot{
38    position:absolute;
39    left:50%;
40    top:50%;
41    width:var(--size);
42    height:var(--size);
43    margin-left:calc(var(--size) / -2);
44    margin-top:calc(var(--size) / -2);
45    border-radius:50%;
46    background:var(--dot);
47    transform:
48      rotate(calc(var(--i) * 60deg))
49      translateY(calc(var(--radius) * -1));
50    animation: pulse var(--duration) linear infinite;
51    animation-delay: calc(var(--i) * -0.208333s);
52    will-change: opacity, transform, background;
53  }
54
55  @keyframes pulse{
56    0%{
57      opacity:.08;
58      background:var(--trail2);
59    }
60    10%{
61      opacity:.35;
62      background:var(--trail);
63    }
64    22%{
65      opacity:1;
66      background:var(--dot);
67    }
68    38%{
69      opacity:1;
70      background:var(--dot);
71    }
72    58%{
73      opacity:.75;
74      background:#8f8f8f;
75    }
76    78%{
77      opacity:.28;
78      background:#3a3a3a;
79    }
80    100%{
81      opacity:.08;
82      background:var(--trail2);
83    }
84  }
85
86  /* subtle overall scale to match the compact look */
87  .loader{
88    transform:scale(.92);
89  }
90</style>
91</head>
92<body>
93  <div class="loader" aria-label="loading">
94    <span class="dot" style="--i:0"></span>
95    <span class="dot" style="--i:1"></span>
96    <span class="dot" style="--i:2"></span>
97    <span class="dot" style="--i:3"></span>
98    <span class="dot" style="--i:4"></span>
99    <span class="dot" style="--i:5"></span>
100  </div>
101</body>
102</html>