model output
Claude Sonnet 4.6

CSS Spinners
A 0.90T 0.29
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    width: 100%;
16    height: 100vh;
17    display: flex;
18    flex-direction: column;
19  }
20
21  .top-half {
22    width: 100%;
23    height: 50%;
24    background-color: #d32f2f;
25    display: flex;
26    align-items: center;
27    justify-content: center;
28    position: relative;
29  }
30
31  .bottom-half {
32    width: 100%;
33    height: 50%;
34    background-color: #ffffff;
35  }
36
37  .spinner {
38    width: 36px;
39    height: 36px;
40    border: 2px solid rgba(100, 20, 20, 0.5);
41    border-top-color: transparent;
42    border-radius: 50%;
43    animation: spin 1s linear infinite;
44    position: absolute;
45    top: 50%;
46    left: 50%;
47    transform: translate(-50%, -50%);
48  }
49
50  @keyframes spin {
51    0% {
52      transform: translate(-50%, -50%) rotate(0deg);
53    }
54    100% {
55      transform: translate(-50%, -50%) rotate(360deg);
56    }
57  }
58</style>
59</head>
60<body>
61  <div class="top-half">
62    <div class="spinner"></div>
63  </div>
64  <div class="bottom-half"></div>
65</body>
66</html>