model output
Claude Sonnet 4.6

Neon Loaders
A 0.81T 0.45
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 Bar Animation</title>
7<style>
8  * { margin: 0; padding: 0; box-sizing: border-box; }
9  
10  body {
11    width: 100vw;
12    height: 100vh;
13    background: radial-gradient(ellipse at center, #0d1a1a 0%, #080e0e 40%, #050a0a 100%);
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    overflow: hidden;
18  }
19
20  .container {
21    position: relative;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25  }
26
27  .track {
28    width: 230px;
29    height: 22px;
30    background: #3a3f45;
31    border-radius: 2px;
32    position: relative;
33    overflow: hidden;
34  }
35
36  .fill {
37    height: 100%;
38    width: 0%;
39    border-radius: 2px;
40    animation: fillProgress 3s ease-in-out infinite;
41    position: relative;
42  }
43
44  .glow-wrap {
45    position: absolute;
46    top: 0; left: 0;
47    width: 100%;
48    height: 100%;
49    border-radius: 2px;
50    pointer-events: none;
51    animation: glowAnim 3s ease-in-out infinite;
52  }
53
54  @keyframes fillProgress {
55    0%   { width: 0%; background: #cc00cc; }
56    10%  { width: 5%; background: #cc00cc; }
57    40%  { width: 55%; background: #9933ff; }
58    55%  { width: 75%; background: #6644ff; }
59    70%  { width: 90%; background: #3366ff; }
60    80%  { width: 100%; background: #1a88ff; }
61    85%  { width: 100%; background: #00aaff; }
62    90%  { width: 100%; background: #00aaff; }
63    /* reset */
64    95%  { width: 5%; background: #cc00cc; }
65    100% { width: 5%; background: #cc00cc; }
66  }
67
68  @keyframes glowAnim {
69    0%   { box-shadow: 0 0 8px 4px rgba(204,0,204,0.8), 0 0 20px 8px rgba(204,0,204,0.3); }
70    10%  { box-shadow: 0 0 8px 4px rgba(204,0,204,0.8), 0 0 20px 8px rgba(204,0,204,0.3); }
71    40%  { box-shadow: 0 0 10px 5px rgba(153,51,255,0.8), 0 0 25px 10px rgba(153,51,255,0.3); }
72    55%  { box-shadow: 0 0 10px 5px rgba(102,68,255,0.8), 0 0 25px 10px rgba(102,68,255,0.3); }
73    70%  { box-shadow: 0 0 12px 6px rgba(51,102,255,0.8), 0 0 30px 12px rgba(51,102,255,0.3); }
74    80%  { box-shadow: 0 0 14px 7px rgba(26,136,255,0.9), 0 0 35px 14px rgba(26,136,255,0.4); }
75    90%  { box-shadow: 0 0 16px 8px rgba(0,170,255,1.0), 0 0 40px 16px rgba(0,170,255,0.5); }
76    94%  { box-shadow: 0 0 16px 8px rgba(0,170,255,1.0), 0 0 40px 16px rgba(0,170,255,0.5); }
77    95%  { box-shadow: 0 0 8px 4px rgba(204,0,204,0.8), 0 0 20px 8px rgba(204,0,204,0.3); }
78    100% { box-shadow: 0 0 8px 4px rgba(204,0,204,0.8), 0 0 20px 8px rgba(204,0,204,0.3); }
79  }
80</style>
81</head>
82<body>
83  <div class="container">
84    <div class="track">
85      <div class="fill"></div>
86      <div class="glow-wrap"></div>
87    </div>
88  </div>
89</body>
90</html>