model output
GPT-5.4

Simple loading indicators
A 0.92T 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>Square Fill Animation</title>
7<style>
8  html, body {
9    margin: 0;
10    width: 100%;
11    height: 100%;
12    background: #ffffff;
13    overflow: hidden;
14  }
15
16  .stage {
17    position: relative;
18    width: 100vw;
19    height: 100vh;
20  }
21
22  .box {
23    position: absolute;
24    left: 28px;
25    top: 28px;
26    width: 50px;
27    height: 50px;
28    background: #c6c6c6;
29    overflow: hidden;
30  }
31
32  .fill {
33    position: absolute;
34    left: 0;
35    width: 100%;
36    height: 100%;
37    background: linear-gradient(to bottom, #27a892 0%, #1f8f7d 100%);
38    animation: sweep 2.4s linear infinite;
39    will-change: transform;
40  }
41
42  @keyframes sweep {
43    /* start: fully gray */
44    0% {
45      transform: translateY(100%);
46    }
47
48    /* teal enters from top, covering half */
49    12.5% {
50      transform: translateY(-50%);
51    }
52
53    /* teal fully covers square */
54    25% {
55      transform: translateY(0%);
56    }
57
58    /* hold full teal briefly */
59    37.5% {
60      transform: translateY(0%);
61    }
62
63    /* gray returns from top, leaving teal at bottom half */
64    50% {
65      transform: translateY(50%);
66    }
67
68    /* gray nearly complete, thin teal strip at bottom */
69    62.5% {
70      transform: translateY(92%);
71    }
72
73    /* back to fully gray */
74    75% {
75      transform: translateY(100%);
76    }
77
78    /* pause before repeating */
79    100% {
80      transform: translateY(100%);
81    }
82  }
83</style>
84</head>
85<body>
86  <div class="stage">
87    <div class="box">
88      <div class="fill"></div>
89    </div>
90  </div>
91</body>
92</html>