model output
Claude Sonnet 4.6

Simple Spinner
A 0.86T 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>Orbiting Dot Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #4a2d7a;
16    width: 100vw;
17    height: 100vh;
18    display: flex;
19    align-items: center;
20    justify-content: center;
21    overflow: hidden;
22  }
23
24  .orbit-container {
25    position: relative;
26    width: 50px;
27    height: 50px;
28  }
29
30  .ring {
31    position: absolute;
32    top: 0;
33    left: 0;
34    width: 50px;
35    height: 50px;
36    border-radius: 50%;
37    border: 1.5px solid currentColor;
38    animation: colorCycle 3s linear infinite;
39  }
40
41  .dot {
42    position: absolute;
43    width: 8px;
44    height: 8px;
45    border-radius: 50%;
46    top: 50%;
47    left: 50%;
48    margin-top: -4px;
49    margin-left: -4px;
50    animation: orbit 3s linear infinite, dotColor 3s linear infinite;
51    transform-origin: center center;
52  }
53
54  @keyframes orbit {
55    0% {
56      transform: rotate(180deg) translateX(25px) rotate(-180deg);
57    }
58    100% {
59      transform: rotate(540deg) translateX(25px) rotate(-540deg);
60    }
61  }
62
63  @keyframes dotColor {
64    0%   { background-color: #29abe2; }
65    16%  { background-color: #3ecf8e; }
66    33%  { background-color: #4caf50; }
67    50%  { background-color: #c8a000; }
68    58%  { background-color: #ff4444; }
69    66%  { background-color: #ff6600; }
70    83%  { background-color: #ffaa00; }
71    100% { background-color: #29abe2; }
72  }
73
74  @keyframes colorCycle {
75    0%   { color: #29abe2; }
76    16%  { color: #3ecf8e; }
77    33%  { color: #4caf50; }
78    50%  { color: #c8a000; }
79    58%  { color: #ff4444; }
80    66%  { color: #ff6600; }
81    83%  { color: #ffaa00; }
82    100% { color: #29abe2; }
83  }
84</style>
85</head>
86<body>
87  <div class="orbit-container">
88    <div class="ring"></div>
89    <div class="dot"></div>
90  </div>
91</body>
92</html>