model output
GPT-5.4

Simple loading indicators
A 0.84T 0.26
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 Fill Dot</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    overflow: hidden;
13    background: #ffffff;
14  }
15
16  .stage {
17    position: relative;
18    width: 100vw;
19    height: 100vh;
20    background: #fff;
21  }
22
23  .dot {
24    position: absolute;
25    left: 28px;
26    top: 28px;
27    width: 50px;
28    height: 50px;
29    border-radius: 50%;
30    background:
31      conic-gradient(from -20deg, #1aa892 0deg 180deg, #d3d3d3 180deg 360deg);
32    animation: spinFill 2.4s linear infinite;
33    transform: rotate(0deg);
34  }
35
36  @keyframes spinFill {
37    0% {
38      background: conic-gradient(from -20deg, #d3d3d3 0deg 360deg);
39    }
40
41    12.5% {
42      background: conic-gradient(from -20deg, #1aa892 0deg 120deg, #d3d3d3 120deg 360deg);
43    }
44
45    25% {
46      background: conic-gradient(from -20deg, #1aa892 0deg 360deg);
47    }
48
49    50% {
50      background: conic-gradient(from 160deg, #1aa892 0deg 360deg);
51    }
52
53    62.5% {
54      background: conic-gradient(from 160deg, #d3d3d3 0deg 300deg, #1aa892 300deg 360deg);
55    }
56
57    75% {
58      background: conic-gradient(from 160deg, #d3d3d3 0deg 360deg);
59    }
60
61    87.5% {
62      background: conic-gradient(from -20deg, #1aa892 0deg 120deg, #d3d3d3 120deg 360deg);
63    }
64
65    100% {
66      background: conic-gradient(from -20deg, #1aa892 0deg 360deg);
67    }
68  }
69</style>
70</head>
71<body>
72  <div class="stage">
73    <div class="dot"></div>
74  </div>
75</body>
76</html>