model output
GPT-5.4

flat loading animate
A 0.91T 0.30
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 Split Circle</title>
7<style>
8  :root{
9    --bg:#ffffff;
10    --teal:#18b3aa;
11    --peach:#ffb562;
12    --size:100px;
13    --dur:1.6s;
14  }
15
16  html,body{
17    margin:0;
18    width:100%;
19    height:100%;
20    background:var(--bg);
21    overflow:hidden;
22  }
23
24  body{
25    display:grid;
26    place-items:center;
27  }
28
29  .spinner{
30    width:var(--size);
31    height:var(--size);
32    border-radius:50%;
33    background:
34      linear-gradient(0deg,
35        var(--peach) 0 50%,
36        var(--teal) 50% 100%);
37    animation: spin var(--dur) linear infinite;
38    transform-origin:center;
39  }
40
41  @keyframes spin{
42    0%{
43      transform:rotate(0deg);
44    }
45    25%{
46      transform:rotate(90deg);
47    }
48    50%{
49      transform:rotate(180deg);
50    }
51    75%{
52      transform:rotate(270deg);
53    }
54    100%{
55      transform:rotate(360deg);
56    }
57  }
58</style>
59</head>
60<body>
61  <div class="spinner" aria-hidden="true"></div>
62</body>
63</html>