GPT-5.4

Tiny Single Element Loading Animations
A 0.84T 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>Plus / X Toggle Animation</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --stroke:#d2cdcb;
11    --size:30px;
12    --lineW:14px;
13    --lineH:2px;
14    --dur:1.8s;
15    --ease:cubic-bezier(.45,0,.55,1);
16  }
17
18  html,body{
19    margin:0;
20    width:100%;
21    height:100%;
22    background:var(--bg);
23    overflow:hidden;
24    font-family:sans-serif;
25  }
26
27  .stage{
28    position:relative;
29    width:100%;
30    height:100%;
31    background:#fff;
32  }
33
34  .icon{
35    position:absolute;
36    left:43px;
37    top:44px;
38    width:var(--size);
39    height:var(--size);
40    border:2px solid var(--stroke);
41    border-radius:50%;
42    box-sizing:border-box;
43    animation: ringTilt var(--dur) var(--ease) infinite;
44    transform-origin:center;
45  }
46
47  .line{
48    position:absolute;
49    left:50%;
50    top:50%;
51    width:var(--lineW);
52    height:var(--lineH);
53    margin-left:calc(var(--lineW) / -2);
54    margin-top:calc(var(--lineH) / -2);
55    background:var(--stroke);
56    border-radius:2px;
57    transform-origin:center;
58  }
59
60  .h{
61    animation: hAnim var(--dur) var(--ease) infinite;
62  }
63
64  .v{
65    animation: vAnim var(--dur) var(--ease) infinite;
66  }
67
68  @keyframes ringTilt{
69    0%, 22%   { transform: rotate(0deg); }
70    34%, 72%  { transform: rotate(45deg); }
71    84%, 100% { transform: rotate(0deg); }
72  }
73
74  /* Horizontal stays horizontal in plus state, becomes one diagonal in x state */
75  @keyframes hAnim{
76    0%, 22%   { transform: rotate(0deg) scaleX(1); opacity:1; }
77    34%, 72%  { transform: rotate(45deg) scaleX(1); opacity:1; }
78    84%, 100% { transform: rotate(0deg) scaleX(1); opacity:1; }
79  }
80
81  /* Vertical fades into the opposite diagonal by rotating -45deg relative to icon center */
82  @keyframes vAnim{
83    0%, 22%   { transform: rotate(90deg) scaleX(1); opacity:1; }
84    34%, 72%  { transform: rotate(-45deg) scaleX(1); opacity:1; }
85    84%, 100% { transform: rotate(90deg) scaleX(1); opacity:1; }
86  }
87</style>
88</head>
89<body>
90  <div class="stage">
91    <div class="icon" aria-hidden="true">
92      <span class="line h"></span>
93      <span class="line v"></span>
94    </div>
95  </div>
96
97<script>
98  // No JS required; CSS loop matches the observed repeating plus-to-x-to-plus motion.
99</script>
100</body>
101</html>