model output
GPT-5.4

Animated Concepts #3
A 0.90T 0.28
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>Rotating Arc Loader</title>
7<style>
8  :root{
9    --bg:#1f1f1f;
10    --accent:#ff8a84;
11    --size:120px;
12  }
13
14  html,body{
15    margin:0;
16    width:100%;
17    height:100%;
18    background:var(--bg);
19    overflow:hidden;
20  }
21
22  body{
23    display:grid;
24    place-items:center;
25  }
26
27  .loader{
28    position:relative;
29    width:var(--size);
30    height:var(--size);
31  }
32
33  .ring{
34    position:absolute;
35    inset:0;
36    margin:auto;
37    border-radius:50%;
38    box-sizing:border-box;
39    animation: spin 1.55s linear infinite;
40    filter: drop-shadow(0 0 0.2px rgba(255,138,132,.35));
41  }
42
43  /* outer broken arc */
44  .outer{
45    width:82px;
46    height:82px;
47    border:5px solid transparent;
48    border-top-color:var(--accent);
49    border-left-color:var(--accent);
50    border-bottom-color:var(--accent);
51    transform:rotate(-38deg);
52    animation-name: spinOuter;
53  }
54
55  /* inner broken arc */
56  .inner{
57    width:48px;
58    height:48px;
59    border:4px solid transparent;
60    border-top-color:var(--accent);
61    border-left-color:var(--accent);
62    border-bottom-color:var(--accent);
63    transform:rotate(78deg);
64    animation-name: spinInner;
65  }
66
67  .dot{
68    position:absolute;
69    left:50%;
70    top:50%;
71    width:9px;
72    height:9px;
73    transform:translate(-50%,-50%);
74    border:3px solid var(--accent);
75    border-radius:50%;
76    box-sizing:border-box;
77    opacity:.95;
78  }
79
80  @keyframes spinOuter{
81    from{ transform:rotate(-38deg); }
82    to  { transform:rotate(322deg); }
83  }
84
85  @keyframes spinInner{
86    from{ transform:rotate(78deg); }
87    to  { transform:rotate(438deg); }
88  }
89
90  /* subtle breathing to match slight frame-to-frame softness */
91  .loader{
92    animation: pulse 1.55s ease-in-out infinite;
93  }
94
95  @keyframes pulse{
96    0%,100%{ transform:scale(1); }
97    50%{ transform:scale(0.985); }
98  }
99</style>
100</head>
101<body>
102  <div class="loader" aria-label="loading animation">
103    <div class="ring outer"></div>
104    <div class="ring inner"></div>
105    <div class="dot"></div>
106  </div>
107</body>
108</html>