model output
Claude Sonnet 4.6

Simple Spinner
A 0.87T 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>Loading Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    background-color: #0047C0;
16    width: 100vw;
17    height: 100vh;
18    display: flex;
19    align-items: center;
20    justify-content: center;
21    overflow: hidden;
22  }
23
24  .spinner {
25    width: 30px;
26    height: 30px;
27    position: relative;
28    animation: rotate 1s linear infinite;
29  }
30
31  .spinner::before,
32  .spinner::after {
33    content: '';
34    position: absolute;
35    border: 2.5px solid transparent;
36    border-radius: 50%;
37    width: 100%;
38    height: 100%;
39    top: 0;
40    left: 0;
41  }
42
43  .spinner::before {
44    border-top-color: #4DC8E8;
45    border-right-color: transparent;
46    border-bottom-color: transparent;
47    border-left-color: transparent;
48    border-top-left-radius: 50%;
49    border-top-right-radius: 50%;
50  }
51
52  .spinner::after {
53    border-top-color: transparent;
54    border-right-color: transparent;
55    border-bottom-color: #4DC8E8;
56    border-left-color: transparent;
57  }
58
59  @keyframes rotate {
60    0% {
61      transform: rotate(0deg);
62    }
63    100% {
64      transform: rotate(360deg);
65    }
66  }
67</style>
68</head>
69<body>
70  <div class="spinner"></div>
71</body>
72</html>