model output
GPT-5.4

Simple loading indicators
A 0.94T 0.27
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>Circle Fill Animation</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  }
21
22  .dot {
23    position: absolute;
24    left: 28px;
25    top: 28px;
26    width: 50px;
27    height: 50px;
28    border-radius: 50%;
29    background:
30      linear-gradient(to bottom,
31        #1f9f8a 0%,
32        #1f9f8a 50%,
33        #cfcfcf 50%,
34        #cfcfcf 100%);
35    animation: fillCycle 2.4s linear infinite;
36  }
37
38  @keyframes fillCycle {
39    /* start: fully gray */
40    0% {
41      background:
42        linear-gradient(to bottom,
43          #cfcfcf 0%,
44          #cfcfcf 100%);
45    }
46
47    /* teal fills from top to bottom */
48    16.666% {
49      background:
50        linear-gradient(to bottom,
51          #1f9f8a 0%,
52          #1f9f8a 50%,
53          #cfcfcf 50%,
54          #cfcfcf 100%);
55    }
56
57    33.333% {
58      background:
59        linear-gradient(to bottom,
60          #1f9f8a 0%,
61          #1f9f8a 100%);
62    }
63
64    /* teal drains downward, gray returns from top */
65    50% {
66      background:
67        linear-gradient(to bottom,
68          #cfcfcf 0%,
69          #cfcfcf 50%,
70          #1f9f8a 50%,
71          #1f9f8a 100%);
72    }
73
74    66.666% {
75      background:
76        linear-gradient(to bottom,
77          #cfcfcf 0%,
78          #cfcfcf 92%,
79          #1f9f8a 92%,
80          #1f9f8a 100%);
81    }
82
83    100% {
84      background:
85        linear-gradient(to bottom,
86          #cfcfcf 0%,
87          #cfcfcf 100%);
88    }
89  }
90</style>
91</head>
92<body>
93  <div class="stage">
94    <div class="dot"></div>
95  </div>
96</body>
97</html>