model output
Claude Sonnet 4.6

flat loading animate
A 0.92T 0.29
1Looking at the frames, I can see a circle divided into two halves (teal/green and orange/peach) that rotates continuously. The dividing line rotates 360 degrees - starting horizontal (teal on top, orange on bottom), rotating through vertical positions, and back around.
2
3<!DOCTYPE html>
4<html lang="en">
5<head>
6<meta charset="UTF-8">
7<meta name="viewport" content="width=device-width, initial-scale=1.0">
8<title>Rotating Circle Animation</title>
9<style>
10  * {
11    margin: 0;
12    padding: 0;
13    box-sizing: border-box;
14  }
15
16  body {
17    background: white;
18    display: flex;
19    justify-content: center;
20    align-items: center;
21    min-height: 100vh;
22  }
23
24  .circle-container {
25    width: 90px;
26    height: 90px;
27    border-radius: 50%;
28    overflow: hidden;
29    position: relative;
30    animation: rotate 2s linear infinite;
31  }
32
33  .half-top {
34    width: 100%;
35    height: 50%;
36    background-color: #1DBFAA;
37  }
38
39  .half-bottom {
40    width: 100%;
41    height: 50%;
42    background-color: #FFBA72;
43  }
44
45  @keyframes rotate {
46    from {
47      transform: rotate(0deg);
48    }
49    to {
50      transform: rotate(360deg);
51    }
52  }
53</style>
54</head>
55<body>
56  <div class="circle-container">
57    <div class="half-top"></div>
58    <div class="half-bottom"></div>
59  </div>
60</body>
61</html>