model output
Claude Sonnet 4.6

Simple loading indicators
A 0.94T 0.29
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  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background: white;
16    width: 100vw;
17    height: 100vh;
18    overflow: hidden;
19  }
20
21  .circle-container {
22    position: absolute;
23    top: 20px;
24    left: 20px;
25    width: 50px;
26    height: 50px;
27    border-radius: 50%;
28    background: #cccccc;
29    overflow: hidden;
30  }
31
32  .fill {
33    position: absolute;
34    bottom: 0;
35    left: 0;
36    width: 100%;
37    background: #2baa8a;
38    animation: fillUp 2s ease-in-out infinite;
39  }
40
41  @keyframes fillUp {
42    0% {
43      height: 0%;
44    }
45    40% {
46      height: 100%;
47    }
48    60% {
49      height: 100%;
50    }
51    100% {
52      height: 0%;
53    }
54  }
55</style>
56</head>
57<body>
58  <div class="circle-container">
59    <div class="fill"></div>
60  </div>
61</body>
62</html>