model output
Claude Sonnet 4.6

CSS3 loading animations
A 0.80T 0.31
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>Cyber Loading Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background: #0a0d0f;
12    width: 100vw;
13    height: 100vh;
14    overflow: hidden;
15    display: flex;
16    align-items: flex-start;
17    justify-content: center;
18  }
19
20  .loader-container {
21    position: absolute;
22    top: 55px;
23    left: 50%;
24    transform: translateX(-50%);
25    width: 60px;
26    height: 60px;
27    display: flex;
28    align-items: center;
29    justify-content: center;
30  }
31
32  /* Glow background */
33  .glow-bg {
34    position: absolute;
35    width: 80px;
36    height: 80px;
37    border-radius: 50%;
38    background: radial-gradient(circle, rgba(0, 180, 200, 0.15) 0%, rgba(0, 100, 130, 0.08) 50%, transparent 70%);
39    animation: glowPulse 1.5s ease-in-out infinite;
40  }
41
42  @keyframes glowPulse {
43    0%, 100% { opacity: 0.6; transform: scale(1); }
44    50% { opacity: 1; transform: scale(1.1); }
45  }
46
47  /* Main spinning arc - the bright cyan arc */
48  .arc-main {
49    position: absolute;
50    width: 36px;
51    height: 36px;
52    border-radius: 50%;
53    border: 2px solid transparent;
54    border-top-color: #00d4e8;
55    border-right-color: #00d4e8;
56    box-shadow: 0 0 8px #00d4e8, 0 0 15px rgba(0, 212, 232, 0.5);
57    animation: spinMain 1s linear infinite;
58  }
59
60  @keyframes spinMain {
61    0% { transform: rotate(0deg); }
62    100% { transform: rotate(360deg); }
63  }
64
65  /* Secondary arc - dimmer, slightly larger */
66  .arc-secondary {
67    position: absolute;
68    width: 42px;
69    height: 42px;
70    border-radius: 50%;
71    border: 1.5px solid transparent;
72    border-left-color: rgba(0, 180, 200, 0.4);
73    border-bottom-color: rgba(0, 180, 200, 0.2);
74    animation: spinSecondary 1.5s linear infinite reverse;
75  }
76
77  @keyframes spinSecondary {
78    0% { transform: rotate(0deg); }
79    100% { transform: rotate(360deg); }
80  }
81
82  /* Inner ring - static dim circle */
83  .arc-inner {
84    position: absolute;
85    width: 28px;
86    height: 28px;
87    border-radius: 50%;
88    border: 1px solid rgba(0, 150, 170, 0.25);
89  }
90
91  /* Outer dashed ring */
92  .arc-outer {
93    position: absolute;
94    width: 50px;
95    height: 50px;
96    border-radius: 50%;
97    border: 1px dashed rgba(0, 150, 170, 0.2);
98    animation: spinOuter 3s linear infinite;
99  }
100
101  @keyframes spinOuter {
102    0% { transform: rotate(0deg); }
103    100% { transform: rotate(360deg); }
104  }
105
106  /* Small tick marks on outer ring */
107  .tick {
108    position: absolute;
109    width: 52px;
110    height: 52px;
111    border-radius: 50%;
112    animation: spinTicks 2s linear infinite;
113  }
114
115  @keyframes spinTicks {
116    0% { transform: rotate(0deg); }
117    100% { transform: rotate(360deg); }
118  }
119
120  .tick::before,
121  .tick::after {
122    content: '';
123    position: absolute;
124    background: rgba(0, 180, 200, 0.5);
125    border-radius: 1px;
126  }
127
128  .tick::before {
129    width: 4px;
130    height: 1.5px;
131    top: 0;
132    left: 50%;
133    transform: translateX(-50%);
134  }
135
136  .tick::after {
137    width: 4px;
138    height: 1.5px;
139    bottom: 0;
140    left: 50%;
141    transform: translateX(-50%);
142  }
143
144  /* Bright dot at the tip of the main arc */
145  .dot {
146    position: absolute;
147    width: 4px;
148    height: 4px;
149    background: #00eeff;
150    border-radius: 50%;
151    box-shadow: 0 0 6px #00eeff, 0 0 12px rgba(0, 238, 255, 0.8);
152    animation: dotOrbit 1s linear infinite;
153    top: 50%;
154    left: 50%;
155    margin-top: -2px;
156    margin-left: -2px;
157    transform-origin: 0 0;
158  }
159
160  @keyframes dotOrbit {
161    0% { transform: rotate(0deg) translateX(18px); }
162    100% { transform: rotate(360deg) translateX(18px); }
163  }
164</style>
165</head>
166<body>
167
168<div class="loader-container">
169  <div class="glow-bg"></div>
170  <div class="arc-outer"></div>
171  <div class="arc-secondary"></div>
172  <div class="arc-inner"></div>
173  <div class="arc-main"></div>
174  <div class="tick"></div>
175  <div class="dot"></div>
176</div>
177
178</body>
179</html>