model output
Claude Sonnet 4.6

Simple loading indicators
A 0.90T 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 Wipe 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  }
19
20  .container {
21    position: absolute;
22    top: 20px;
23    left: 20px;
24    width: 50px;
25    height: 50px;
26    overflow: hidden;
27  }
28
29  .gray-square {
30    position: absolute;
31    width: 50px;
32    height: 50px;
33    background: #c8c8c8;
34  }
35
36  .teal-wipe {
37    position: absolute;
38    width: 50px;
39    height: 50px;
40    background: #1aaa8c;
41    animation: wipeUpDown 2s ease-in-out infinite;
42  }
43
44  @keyframes wipeUpDown {
45    0% {
46      transform: translateY(100%);
47    }
48    40% {
49      transform: translateY(0%);
50    }
51    60% {
52      transform: translateY(0%);
53    }
54    100% {
55      transform: translateY(-100%);
56    }
57  }
58</style>
59</head>
60<body>
61  <div class="container">
62    <div class="gray-square"></div>
63    <div class="teal-wipe"></div>
64  </div>
65</body>
66</html>