model output
Claude Sonnet 4.6

Animated Concepts #3
A 0.85T 0.25
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 Loader</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #2a2a2a;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    width: 100vw;
16    height: 100vh;
17    overflow: hidden;
18  }
19
20  .loader {
21    position: relative;
22    width: 60px;
23    height: 60px;
24  }
25
26  .ring {
27    position: absolute;
28    top: 0; left: 0;
29    width: 60px;
30    height: 60px;
31    border-radius: 50%;
32    border: 2px solid #f07060;
33  }
34
35  .dot {
36    position: absolute;
37    width: 10px;
38    height: 10px;
39    background-color: #f07060;
40    border-radius: 50%;
41    top: 50%;
42    left: 50%;
43    margin-top: -5px;
44    margin-left: -5px;
45    transform-origin: 0px 0px;
46    animation: orbit 1.4s linear infinite;
47  }
48
49  @keyframes orbit {
50    0%   { transform: rotate(0deg) translateX(30px); }
51    100% { transform: rotate(360deg) translateX(30px); }
52  }
53</style>
54</head>
55<body>
56  <div class="loader">
57    <div class="ring"></div>
58    <div class="dot"></div>
59  </div>
60</body>
61</html>