model output
Claude Sonnet 4.6

CSS3 loading animations
A 0.81T 0.33
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>Spinner Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    background-color: #0a0a0a;
12    width: 100vw;
13    height: 100vh;
14    overflow: hidden;
15    display: flex;
16    justify-content: center;
17    align-items: flex-start;
18  }
19
20  .spinner-container {
21    position: absolute;
22    top: 15px;
23    left: 50%;
24    transform: translateX(-50%);
25    width: 50px;
26    height: 50px;
27    display: flex;
28    align-items: center;
29    justify-content: center;
30  }
31
32  .ring {
33    position: absolute;
34    border-radius: 50%;
35    border: 2px solid transparent;
36  }
37
38  /* Outer ring - dashed segments, rotates clockwise */
39  .ring-outer {
40    width: 46px;
41    height: 46px;
42    border-top-color: #00e5b0;
43    border-right-color: #00e5b0;
44    border-bottom-color: transparent;
45    border-left-color: transparent;
46    animation: spin-cw 1.2s linear infinite, pulse-glow 1.2s ease-in-out infinite;
47    filter: drop-shadow(0 0 4px #00e5b0);
48  }
49
50  /* Middle ring - rotates counter-clockwise */
51  .ring-middle {
52    width: 34px;
53    height: 34px;
54    border-top-color: transparent;
55    border-right-color: #00c896;
56    border-bottom-color: #00c896;
57    border-left-color: transparent;
58    animation: spin-ccw 0.9s linear infinite, pulse-glow 1.2s ease-in-out infinite 0.3s;
59    filter: drop-shadow(0 0 3px #00c896);
60  }
61
62  /* Inner ring - rotates clockwise */
63  .ring-inner {
64    width: 22px;
65    height: 22px;
66    border-top-color: #00e5b0;
67    border-right-color: transparent;
68    border-bottom-color: #00e5b0;
69    border-left-color: transparent;
70    animation: spin-cw 0.7s linear infinite, pulse-glow 1.2s ease-in-out infinite 0.6s;
71    filter: drop-shadow(0 0 2px #00e5b0);
72  }
73
74  /* Glow pulse on container */
75  .spinner-container::after {
76    content: '';
77    position: absolute;
78    width: 50px;
79    height: 50px;
80    border-radius: 50%;
81    background: radial-gradient(circle, rgba(0, 229, 176, 0.15) 0%, transparent 70%);
82    animation: pulse-bg 1.2s ease-in-out infinite;
83  }
84
85  @keyframes spin-cw {
86    from { transform: rotate(0deg); }
87    to { transform: rotate(360deg); }
88  }
89
90  @keyframes spin-ccw {
91    from { transform: rotate(0deg); }
92    to { transform: rotate(-360deg); }
93  }
94
95  @keyframes pulse-glow {
96    0%, 100% { opacity: 0.4; }
97    50% { opacity: 1; }
98  }
99
100  @keyframes pulse-bg {
101    0%, 100% { opacity: 0.3; transform: scale(0.9); }
102    50% { opacity: 1; transform: scale(1.2); }
103  }
104</style>
105</head>
106<body>
107  <div class="spinner-container">
108    <div class="ring ring-outer"></div>
109    <div class="ring ring-middle"></div>
110    <div class="ring ring-inner"></div>
111  </div>
112</body>
113</html>