model output
Claude Sonnet 4.6

Loaders (WIP)
A 0.94T 0.22
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 Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #e8473a;
16    width: 100vw;
17    height: 100vh;
18    display: flex;
19    align-items: flex-start;
20    justify-content: center;
21    overflow: hidden;
22  }
23
24  .container {
25    position: relative;
26    width: 80px;
27    height: 80px;
28    margin-top: 60px;
29  }
30
31  .circle {
32    width: 80px;
33    height: 80px;
34    border-radius: 50%;
35    border: 2px solid rgba(255, 255, 255, 0.85);
36    position: absolute;
37    top: 0;
38    left: 0;
39  }
40
41  .dot {
42    width: 7px;
43    height: 7px;
44    background-color: white;
45    border-radius: 50%;
46    position: absolute;
47    top: 50%;
48    left: 50%;
49    margin-left: -3.5px;
50    margin-top: -3.5px;
51    animation: orbit 2s linear infinite;
52    transform-origin: 0 0;
53  }
54
55  @keyframes orbit {
56    0% {
57      transform: rotate(0deg) translateX(40px);
58    }
59    100% {
60      transform: rotate(360deg) translateX(40px);
61    }
62  }
63</style>
64</head>
65<body>
66  <div class="container">
67    <div class="circle"></div>
68    <div class="dot"></div>
69  </div>
70</body>
71</html>