model output
Claude Sonnet 4.6

Neon Loaders
A 0.86T 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>Neon Loading Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    width: 100vw;
16    height: 100vh;
17    background: radial-gradient(ellipse at center, #1a1a1a 0%, #0d0d0d 60%, #080808 100%);
18    display: flex;
19    align-items: center;
20    justify-content: center;
21    overflow: hidden;
22  }
23
24  .loading-btn {
25    position: relative;
26    padding: 14px 60px;
27    background: rgba(20, 20, 25, 0.85);
28    border: 2px solid;
29    font-family: 'Arial', sans-serif;
30    font-size: 16px;
31    font-weight: 600;
32    letter-spacing: 3px;
33    text-transform: uppercase;
34    cursor: default;
35    animation: colorCycle 4s linear infinite;
36  }
37
38  @keyframes colorCycle {
39    0% {
40      border-color: #ff00cc;
41      color: #ff00cc;
42      box-shadow:
43        0 0 8px #ff00cc,
44        0 0 20px rgba(255, 0, 204, 0.4),
45        inset 0 0 10px rgba(255, 0, 204, 0.05);
46      text-shadow: 0 0 8px #ff00cc, 0 0 15px rgba(255, 0, 204, 0.5);
47    }
48    25% {
49      border-color: #aa00ff;
50      color: #aa00ff;
51      box-shadow:
52        0 0 8px #aa00ff,
53        0 0 20px rgba(170, 0, 255, 0.4),
54        inset 0 0 10px rgba(170, 0, 255, 0.05);
55      text-shadow: 0 0 8px #aa00ff, 0 0 15px rgba(170, 0, 255, 0.5);
56    }
57    50% {
58      border-color: #0088ff;
59      color: #0088ff;
60      box-shadow:
61        0 0 8px #0088ff,
62        0 0 20px rgba(0, 136, 255, 0.4),
63        inset 0 0 10px rgba(0, 136, 255, 0.05);
64      text-shadow: 0 0 8px #0088ff, 0 0 15px rgba(0, 136, 255, 0.5);
65    }
66    75% {
67      border-color: #00ccff;
68      color: #00ccff;
69      box-shadow:
70        0 0 8px #00ccff,
71        0 0 20px rgba(0, 204, 255, 0.4),
72        inset 0 0 10px rgba(0, 204, 255, 0.05);
73      text-shadow: 0 0 8px #00ccff, 0 0 15px rgba(0, 204, 255, 0.5);
74    }
75    100% {
76      border-color: #ff00cc;
77      color: #ff00cc;
78      box-shadow:
79        0 0 8px #ff00cc,
80        0 0 20px rgba(255, 0, 204, 0.4),
81        inset 0 0 10px rgba(255, 0, 204, 0.05);
82      text-shadow: 0 0 8px #ff00cc, 0 0 15px rgba(255, 0, 204, 0.5);
83    }
84  }
85
86  .glow-bg {
87    position: absolute;
88    width: 300px;
89    height: 150px;
90    border-radius: 50%;
91    filter: blur(40px);
92    opacity: 0.15;
93    animation: glowBgCycle 4s linear infinite;
94    pointer-events: none;
95  }
96
97  @keyframes glowBgCycle {
98    0% { background: #ff00cc; }
99    25% { background: #aa00ff; }
100    50% { background: #0088ff; }
101    75% { background: #00ccff; }
102    100% { background: #ff00cc; }
103  }
104</style>
105</head>
106<body>
107  <div class="glow-bg"></div>
108  <button class="loading-btn">LOADING</button>
109</body>
110</html>