model output
Claude Sonnet 4.6

Simple loading indicators
A 0.85T 0.30
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 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  .container {
22    position: relative;
23    width: 100%;
24    height: 100%;
25  }
26
27  .square-wrapper {
28    position: absolute;
29    top: 20px;
30    left: 20px;
31    width: 50px;
32    height: 50px;
33    animation: rotateSquare 2s ease-in-out infinite;
34  }
35
36  .square-bg {
37    position: absolute;
38    width: 50px;
39    height: 50px;
40    background: #c8c8c8;
41    top: 0;
42    left: 0;
43  }
44
45  .square-green {
46    position: absolute;
47    width: 50px;
48    height: 50px;
49    background: #2aaa8a;
50    top: 0;
51    left: 0;
52    animation: revealGreen 2s ease-in-out infinite;
53    transform-origin: bottom center;
54  }
55
56  @keyframes rotateSquare {
57    0% {
58      transform: rotate(0deg);
59    }
60    25% {
61      transform: rotate(-15deg);
62    }
63    50% {
64      transform: rotate(0deg);
65    }
66    75% {
67      transform: rotate(-15deg);
68    }
69    100% {
70      transform: rotate(0deg);
71    }
72  }
73
74  @keyframes revealGreen {
75    0% {
76      clip-path: inset(100% 0 0 0);
77    }
78    25% {
79      clip-path: inset(0% 0 0 0);
80    }
81    50% {
82      clip-path: inset(0% 0 0 0);
83    }
84    75% {
85      clip-path: inset(100% 0 0 0);
86    }
87    100% {
88      clip-path: inset(100% 0 0 0);
89    }
90  }
91</style>
92</head>
93<body>
94<div class="container">
95  <div class="square-wrapper">
96    <div class="square-bg"></div>
97    <div class="square-green"></div>
98  </div>
99</div>
100
101<script>
102  // The animation is purely CSS-driven
103  // The square rotates slightly and the green color sweeps in/out
104</script>
105</body>
106</html>